/* tokens.css — the single source of truth for Graham Terminal design tokens.
 *
 * Every page loads these via theme.css (@import). Because they are plain :root
 * custom properties they also inherit into shadow DOM, so the same tokens theme
 * both legacy CSS and the <gt-*> Lit components in web/assets/gt.js.
 *
 * DARK is the default. Light overrides live under `html.light, body.light` so
 * they apply whether the theme class lands on <html> (the global FOUC guard +
 * auth.js) or <body> (the stock page's overview.js toggle). The two selectors
 * are collapsed to just html.light in Phase 5 when the stock page is refactored.
 *
 * Do NOT redeclare palette variables anywhere else. Pages that need a private
 * shade should build it from these tokens, not fork the palette.
 */

:root {
  /* ── Color: surfaces ──
   * An elevation ladder, not a set of unrelated greys: the canvas is the
   * deepest, cards sit on it, and chrome (panel headers, inputs, sticky rows)
   * sits on the cards. Each step is a few points of lightness on one cool navy
   * hue, so depth reads without a single border being drawn.
   *
   * --bg-panel used to be *darker* than the canvas, which made every panel
   * header a hole rather than a surface. It is now the raised chrome tone.
   */
  --bg:           #141414;
  --bg-card:      #191919;
  --bg-panel:     #202020;
  --bg-chip:      #292929;
  --border:       #363636;
  --border-soft:  #292929;

  /* ── Color: text ─────────────────────────────────────────────────── */
  --text:         #dddddd;
  --text-strong:  #f5f5f5;
  --text-soft:    #c2c2c2;
  --muted:        #9a9a9a;
  --muted-dim:    #858585;

  /* ── Color: brand + market semantics ──
   * The -rgb companions exist so tinted fills and hairlines can be built from
   * the token (rgb(var(--accent-rgb) / 12%)) instead of a hardcoded rgba(),
   * Hardcoding is how the palette drifted in the first place.
   */
  --accent:       #63b33a;
  --accent-rgb:   99 179 58;
  --accent-strong:#79c553;
  --accent-soft:  rgba(99, 179, 58, 0.10);
  --accent-line:  rgba(99, 179, 58, 0.38);
  --ice:          #8fb6d9;
  --ice-soft:     #202a32;
  --ice-line:     #344754;

  /* Direction pair. Held to the same chroma as the gold accent (S~53%) on
   * purpose: the previous #22c55e / #ef4444 were fully saturated web greens
   * and reds at S 71% and S 84%, which vibrated against a muted warm accent
   * and glared on a dark ground — every figure on a dense board shouting at
   * once. Softening the chroma costs nothing in legibility (green 8.6:1 ->
   * 8.4:1, red 5.2:1 -> 5.9:1 on the canvas) and lets the board read as one
   * palette instead of three competing ones. Hues are unchanged, so the
   * green/red convention is intact. */
  --up:           #63b866;
  --up-rgb:       99 184 102;
  --up-soft:      rgba(47, 125, 50, 0.10);
  --up-line:      rgba(47, 125, 50, 0.30);
  --down:         #ef6b6b;
  --down-rgb:     239 107 107;
  --down-soft:    rgba(198, 40, 40, 0.09);
  --down-line:    rgba(198, 40, 40, 0.28);

  --bench:        #dedede;
  --info:         #a8a8a8;
  --info-rgb:     168 168 168;

  /* Focus ring — one definition, so keyboard focus looks the same everywhere. */
  --ring:         0 0 0 3px rgba(99, 179, 58, 0.28);

  /* ── Color: badges (13F diffs) ───────────────────────────────────── */
  --badge-new-bg:  #134e3a; --badge-new-fg:  #34d399;
  --badge-exit-bg: #4b1818; --badge-exit-fg: #fca5a5;
  --badge-add-bg:  #133748; --badge-add-fg:  #67e8f9;
  --badge-trim-bg: #3a2d10; --badge-trim-fg: #fde68a;

  /* ── Color: treemap fills ────────────────────────────────────────── */
  --tm-hold-fill: #1e2a3d; --tm-hold-stroke: #3d526b;
  --tm-new-fill:  #154935; --tm-new-stroke:  #34d399;
  --tm-add-fill:  #13445a; --tm-add-stroke:  #67e8f9;
  --tm-trim-fill: #4a3a10; --tm-trim-stroke: #fde68a;
  --tm-label:     #f4f7fc;
  --tm-sublabel:  #8b98ae;

  --grid:         #262626;

  /* ── Typography ──────────────────────────────────────────────────── */
  --font-ui:   'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (labels through display). Collapses the 0.58–0.82rem drift. */
  --fs-label: 0.68rem;   /* uppercase eyebrow/labels */
  --fs-xs:    0.72rem;
  --fs-sm:    0.82rem;
  --fs-base:  0.94rem;
  --fs-md:    1.05rem;
  --fs-lg:    1.25rem;
  --fs-xl:    1.6rem;
  --fs-2xl:   2.1rem;
  --fs-3xl:   2.8rem;

  /* ── Spacing scale (4px base) ────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  48px;

  /* ── Radius scale ──
   * Opened up one step across the board: a 3px corner reads as an artifact of
   * the border, an 8px corner reads as a decision.
   */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ── Elevation ──
   * Two-part shadows: a tight contact shadow plus a wide soft one. A single
   * large blur reads as fog; the pair reads as a card lifted off the canvas.
   */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-2: 0 6px 20px -6px rgba(0,0,0,0.55), 0 2px 6px -2px rgba(0,0,0,0.35);
  --shadow-3: 0 28px 70px -20px rgba(0,0,0,0.75);
  --shadow:   var(--shadow-2);   /* back-compat alias for existing refs */

  /* ── Motion ──────────────────────────────────────────────────────── */
  --ease:  cubic-bezier(.2, .6, .2, 1);
  --dur-1: .12s;
  --dur-2: .22s;
}

/* Light mirrors the dark ladder rather than inverting it blindly: in light,
 * raised means whiter, so a card is white and chrome is the tinted tone —
 * the opposite arrangement to dark, for the same reading of depth. */
html.light, body.light {
  --bg:           #ffffff;
  --bg-card:      #ffffff;
  --bg-chip:      #eeeeee;
  --bg-panel:     #f5f5f5;
  --border:       #d8d8d8;
  --border-soft:  #e9e9e9;
  --text:         #282828;
  --text-strong:  #111111;
  --text-soft:    #454545;
  --muted:        #666666;
  --muted-dim:    #7a7a7a;
  --accent:       #63b33a;
  --accent-rgb:   99 179 58;
  --accent-strong:#3f8426;
  --accent-soft:  rgba(99, 179, 58, 0.10);
  --accent-line:  rgba(99, 179, 58, 0.38);
  --ice:          #8fb6d9;
  --ice-soft:     #f2f7fb;
  --ice-line:     #dbe8f2;
  --up:           #0f7336;
  --up-rgb:       15 115 54;
  --up-soft:      rgba(15, 115, 54, 0.10);
  --up-line:      rgba(15, 115, 54, 0.30);
  --down:         #c02626;
  --down-rgb:     192 38 38;
  --down-soft:    rgba(192, 38, 38, 0.10);
  --down-line:    rgba(192, 38, 38, 0.30);
  --bench:        #161616;
  --info:         #555555;
  --info-rgb:     85 85 85;
  --ring:         0 0 0 3px rgba(99, 179, 58, 0.25);
  --badge-new-bg:  #d1fae5; --badge-new-fg:  #065f46;
  --badge-exit-bg: #fee2e2; --badge-exit-fg: #991b1b;
  --badge-add-bg:  #cffafe; --badge-add-fg:  #155e75;
  --badge-trim-bg: #fef3c7; --badge-trim-fg: #78350f;
  --tm-hold-fill: #e2e8f0; --tm-hold-stroke: #94a3b8;
  --tm-new-fill:  #d1fae5; --tm-new-stroke:  #059669;
  --tm-add-fill:  #cffafe; --tm-add-stroke:  #0891b2;
  --tm-trim-fill: #fef3c7; --tm-trim-stroke: #d97706;
  --tm-label:     #1a2332;
  --tm-sublabel:  #475569;
  --grid:         #e2e8f0;
  --shadow-1: 0 1px 2px rgba(15,23,42,0.06);
  --shadow-2: 0 6px 20px -6px rgba(15,23,42,0.12), 0 2px 6px -2px rgba(15,23,42,0.06);
  --shadow-3: 0 28px 70px -20px rgba(15,23,42,0.20);
  --shadow:   var(--shadow-2);
}