/* tokens.css — WealthOS design system. Every component consumes these tokens.
   No hard-coded hex in markup. Editorial-meets-Linear: dense, calm, confident. */

/* ── Self-hosted fonts (copied by scripts/setup-assets.js, served from /fonts) ── */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/newsreader.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/newsreader-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/hanken.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geist-mono.woff2') format('woff2');
}

:root {
  /* Type families */
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Tabular figures for money/tables */
  --tnum: "tnum" 1, "lnum" 1;

  /* Spacing — 8px scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --radius-sm: 6px; --radius: 10px; --radius-lg: 16px;
  --maxw: 1180px;

  --transition: 150ms cubic-bezier(0.2, 0, 0, 1);

  /* Chart palette (shared with chart theme module) */
  --c-1: oklch(0.62 0.14 265);
  --c-2: oklch(0.72 0.12 150);
  --c-3: oklch(0.64 0.15 25);
  --c-4: oklch(0.74 0.13 85);
  --c-5: oklch(0.68 0.12 200);
  --c-6: oklch(0.70 0.13 320);
  --c-7: oklch(0.66 0.10 50);
  --c-8: oklch(0.60 0.10 240);
}

/* ── Dark theme (default) ── */
:root, :root[data-theme='dark'] {
  --bg:            oklch(0.16 0.005 270);
  --bg-elevated:   oklch(0.20 0.006 270);
  --bg-raised:     oklch(0.235 0.007 270);
  --bg-hover:      oklch(0.255 0.008 270);
  --border:        oklch(1 0 0 / 0.09);
  --border-strong: oklch(1 0 0 / 0.16);

  --text:        oklch(0.96 0.005 270);
  --text-2:      oklch(0.96 0.005 270 / 0.70);
  --text-3:      oklch(0.96 0.005 270 / 0.45);

  --accent:      oklch(0.62 0.14 265);
  --accent-soft: oklch(0.62 0.14 265 / 0.15);
  --accent-text: oklch(0.78 0.12 265);

  --pos:  oklch(0.72 0.12 150);
  --pos-soft: oklch(0.72 0.12 150 / 0.14);
  --neg:  oklch(0.64 0.15 25);
  --neg-soft: oklch(0.64 0.15 25 / 0.14);
  --warn: oklch(0.74 0.13 85);

  --shadow: 0 1px 2px oklch(0 0 0 / 0.4), 0 8px 24px oklch(0 0 0 / 0.28);
  --grid: oklch(1 0 0 / 0.06);
}

/* ── Light theme — a real tuned theme, not inverted ── */
:root[data-theme='light'] {
  --bg:            oklch(0.985 0.003 270);
  --bg-elevated:   oklch(1 0 0);
  --bg-raised:     oklch(1 0 0);
  --bg-hover:      oklch(0.95 0.004 270);
  --border:        oklch(0.2 0.02 270 / 0.12);
  --border-strong: oklch(0.2 0.02 270 / 0.22);

  --text:   oklch(0.24 0.01 270);
  --text-2: oklch(0.24 0.01 270 / 0.72);
  --text-3: oklch(0.24 0.01 270 / 0.46);

  --accent:      oklch(0.52 0.16 265);
  --accent-soft: oklch(0.52 0.16 265 / 0.10);
  --accent-text: oklch(0.46 0.17 265);

  --pos:  oklch(0.52 0.13 150);
  --pos-soft: oklch(0.52 0.13 150 / 0.12);
  --neg:  oklch(0.54 0.18 25);
  --neg-soft: oklch(0.54 0.18 25 / 0.10);
  --warn: oklch(0.62 0.14 75);

  --shadow: 0 1px 2px oklch(0.2 0.02 270 / 0.08), 0 8px 24px oklch(0.2 0.02 270 / 0.10);
  --grid: oklch(0.2 0.02 270 / 0.08);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.tnum { font-feature-settings: var(--tnum); font-variant-numeric: tabular-nums lining-nums; }
.serif { font-family: var(--font-serif); }
.mono { font-family: var(--font-mono); font-feature-settings: var(--tnum); }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
a { color: var(--accent-text); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}