/* ==========================================================================
   Design tokens
   Single source of truth for colour, type, spacing and motion.
   Dark is the default; the light palette overrides only what must change.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* -- Surfaces ---------------------------------------------------------- */
  --bg:            #07080c;
  --bg-glow-a:     rgba(247, 147, 26, 0.10);
  --bg-glow-b:     rgba(0, 214, 143, 0.06);
  --surface:       rgba(255, 255, 255, 0.032);
  --surface-hover: rgba(255, 255, 255, 0.055);
  --surface-solid: #101219;
  --border:        rgba(255, 255, 255, 0.075);
  --track:         rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* -- Text -------------------------------------------------------------- */
  --text:      #eef1f6;
  --text-dim:  #98a2b3;
  --text-mute: #626b7b;

  /* -- Brand & semantics ------------------------------------------------- */
  --accent:      #f7931a;
  --accent-soft: rgba(247, 147, 26, 0.14);
  --buy:         #00d68f;
  --buy-soft:    rgba(0, 214, 143, 0.14);
  --sell:        #ff4d6a;
  --sell-soft:   rgba(255, 77, 106, 0.14);
  --neutral:     #7c8899;

  /* -- Fluid type scale --------------------------------------------------
     clamp() keeps every size proportional from a 360px phone to a 4K TV,
     so the page never needs a breakpoint just to resize text.            */
  --fs-2xs: clamp(0.625rem, 0.60rem + 0.12vw, 0.80rem);
  --fs-xs:  clamp(0.6875rem, 0.65rem + 0.18vw, 0.90rem);
  --fs-sm:  clamp(0.8125rem, 0.77rem + 0.22vw, 1.05rem);
  --fs-md:  clamp(0.9375rem, 0.89rem + 0.26vw, 1.20rem);
  --fs-lg:  clamp(1.125rem, 1.03rem + 0.45vw, 1.60rem);
  --fs-xl:  clamp(1.5rem, 1.30rem + 1.00vw, 2.60rem);
  --fs-price: clamp(2.75rem, 1.60rem + 5.60vw, 8.00rem);

  /* -- Spacing ----------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --gap:  clamp(0.75rem, 0.45rem + 1.1vw, 1.5rem);
  --pad:  clamp(1rem, 0.60rem + 1.6vw, 2rem);

  /* -- Shape & depth ----------------------------------------------------- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px -12px rgba(0, 0, 0, 0.7);

  /* -- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur:      260ms;
  --dur-slow: 620ms;

  /* -- Layout ------------------------------------------------------------ */
  --maxw: 1440px;
  --gauge-w: 22rem;

  /* Shared height for the chart and tape panels, so they line up. */
  --panel-h: clamp(11rem, 8rem + 16vw, 22rem);

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

/* Light palette. Only the values that must differ are redefined, so any token
   added above is inherited by both themes automatically. */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:            #f7f8fa;
  --bg-glow-a:     rgba(247, 147, 26, 0.13);
  --bg-glow-b:     rgba(0, 168, 113, 0.09);
  --surface:       rgba(255, 255, 255, 0.85);
  --surface-hover: #ffffff;
  --surface-solid: #ffffff;
  --border:        rgba(9, 12, 20, 0.10);
  --track:         rgba(9, 12, 20, 0.10);
  --border-strong: rgba(9, 12, 20, 0.18);

  --text:      #0d1017;
  --text-dim:  #515c6d;
  --text-mute: #7a8494;

  --buy:      #00a06c;
  --buy-soft: rgba(0, 160, 108, 0.14);
  --sell:     #dc2743;
  --sell-soft: rgba(220, 39, 67, 0.12);
  --neutral:  #6b7686;

  --shadow: 0 1px 2px rgba(9, 12, 20, 0.06), 0 12px 30px -14px rgba(9, 12, 20, 0.22);
}

/* Very large displays are viewed from further away, so the whole page needs to
   grow - not just the headline number.

   Every token above is a rem-based clamp, including its own bounds, so raising
   the root font size scales type, spacing, radii and panel heights together in
   one move. That keeps the proportions of the design intact instead of pulling
   one element out of scale with the rest. */
@media (min-width: 1920px) {
  :root { --maxw: 1800px; --gauge-w: 24rem; }
  html { font-size: 17.5px; }
}

@media (min-width: 2560px) {
  :root { --maxw: 2240px; --gauge-w: 26rem; }
  html { font-size: 20px; }
}

/* 4K. Beyond this the shell stops widening and the page simply centres, which
   is more readable than lines that span a whole wall. */
@media (min-width: 3440px) {
  :root { --maxw: 2600px; }
  html { font-size: 23px; }
}