/* TradeTrack — Design Tokens
 * Ported from docs/DesignSystem/reference/tokens.css.
 * Trimmed to the single shipping configuration: vault palette, dark theme,
 * classic type pairing (IBM Plex), compact density. Other palettes/themes/
 * type pairings/density values are intentionally omitted and will be added
 * back if/when a Tweaks Panel ships.
 */

:root {
  /* ── PALETTE: Vault — deep navy + bronze used as INK/ACCENT only ──
     Bronze never blends into backgrounds — it lives on text, hairlines, primary
     buttons, and sparkline accents. Surfaces stay cool navy. */
  --bg-deep:      oklch(0.16 0.014 252);
  --bg-base:      oklch(0.195 0.015 252);
  --bg-raised:    oklch(0.230 0.016 252);
  --bg-overlay:   oklch(0.275 0.017 252);
  --bg-inset:     oklch(0.150 0.013 252);

  --line:         oklch(0.32 0.018 252);
  --line-soft:    oklch(0.26 0.016 252);
  --line-strong:  oklch(0.45 0.022 252);

  --ink:          oklch(0.96 0.008 85);
  --ink-2:        oklch(0.82 0.010 85);
  --ink-3:        oklch(0.66 0.012 85);
  --ink-4:        oklch(0.50 0.012 85);
  --ink-5:        oklch(0.38 0.012 85);

  /* Bronze accent — for type, hairlines, primary action.
     -soft is a *very* low alpha so it never feels muddy on a surface. */
  --accent:        oklch(0.78 0.105 65);
  --accent-soft:   oklch(0.78 0.105 65 / 0.07);
  --accent-deep:   oklch(0.62 0.115 60);
  --accent-ink:    oklch(0.88 0.090 70);

  /* Signal blue — chart strokes, primary data accent (cool, sits on navy). */
  --signal:        oklch(0.70 0.130 240);
  --signal-soft:   oklch(0.70 0.130 240 / 0.12);
  --signal-deep:   oklch(0.55 0.155 245);

  /* Back-compat aliases — old code still says bronze/* */
  --bronze:        var(--accent);
  --bronze-soft:   var(--accent-soft);
  --bronze-deep:   var(--accent-deep);
  --bronze-ink:    var(--accent-ink);

  --pos:           oklch(0.72 0.115 152);
  --pos-soft:      oklch(0.72 0.115 152 / 0.14);
  --neg:           oklch(0.66 0.165 25);
  --neg-soft:      oklch(0.66 0.165 25 / 0.14);
  --warn:          oklch(0.78 0.130 75);
  --warn-soft:     oklch(0.78 0.130 75 / 0.14);

  /* Hero glow colors — used in radial gradients */
  --glow-a: var(--accent-soft);
  --glow-b: var(--signal-soft);

  /* ── Typography (defaults; classic type pair below overrides for IBM Plex) ── */
  --font-display: "Newsreader", ui-serif, Georgia, serif;
  --font-sans:    "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-micro:   13px;
  --fs-tiny:    14.5px;
  --fs-small:   15.5px;
  --fs-body:    17px;
  --fs-h6:      15px;
  --fs-h5:      18px;
  --fs-h4:      22px;
  --fs-h3:      28px;
  --fs-h2:      38px;
  --fs-h1:      56px;
  --fs-mega:    88px;

  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 22px;

  --shadow-soft: 0 1px 2px rgba(0,0,0,.25), 0 4px 16px rgba(0,0,0,.22);
  --shadow-pop: 0 4px 12px rgba(0,0,0,.35), 0 24px 56px rgba(0,0,0,.45);
  --inset-line: inset 0 0 0 1px var(--line);
  --inset-line-soft: inset 0 0 0 1px var(--line-soft);

  --row-h: 36px;
  --pad-card: 22px;
  --pad-cell-x: 12px;
  --pad-cell-y: 9px;
}

/* Compact density (the only density we ship today) */
[data-density="compact"] {
  --row-h: 28px;
  --pad-card: 16px;
  --pad-cell-x: 10px;
  --pad-cell-y: 6px;
  --fs-body: 15.5px;
  --fs-small: 14.5px;
}

/* Classic type pair — IBM Plex Serif (display) + IBM Plex Sans (UI) + IBM Plex Mono (numerals) */
[data-type="classic"] {
  --font-display: "IBM Plex Serif", ui-serif, Georgia, serif;
  --font-sans:    "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;
}

/* ── Reset + base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg-deep);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--bronze-soft); }

/* Mono utility */
.mono, .tabnum { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tabnum { font-variant-numeric: tabular-nums; }

/* Headings reset (we drive size locally) */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; letter-spacing: -0.01em; }

/* Thin scrollbar for nav etc. */
.scroll-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-thin::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }