/* Assety shared tokens — light theme default, dark mode via data-theme="dark"
 *
 * Every value below is Tailwind-aligned (see design.md §0):
 *   - radii  4/8/12/16   →  rounded · rounded-lg · rounded-xl · rounded-2xl
 *   - spacing 4/8/12/16/20/28/40/56  →  p-1 · p-2 · p-3 · p-4 · p-5 · p-7 · p-10 · p-14
 *   - colors stay in oklch(); the app maps them into shadcn's
 *     --background / --foreground / --primary / --muted / --border slots.
 * Do not introduce off-scale literals — extend tailwind.config first.
 */
:root {
  /* Surfaces (warm off-white) */
  --bg:        oklch(0.985 0.003 90);
  --bg-soft:   oklch(0.965 0.004 90);
  --panel:     oklch(1.000 0.000 0);
  --panel-hi:  oklch(0.955 0.005 90);
  --border:    oklch(0.915 0.005 90);
  --border-hi: oklch(0.860 0.006 90);

  /* Text */
  --text:       oklch(0.205 0.012 260);
  --text-mid:   oklch(0.395 0.010 260);
  --text-dim:   oklch(0.555 0.008 260);
  --text-faint: oklch(0.700 0.006 260);

  /* Semantic */
  --up:    oklch(0.55 0.155 152);
  --down:  oklch(0.55 0.195 25);
  --amber: oklch(0.62 0.135 65);
  --brand: oklch(0.55 0.110 70);

  /* Accents */
  --accent:        oklch(0.66 0.165 152);
  --accent-cyan:   oklch(0.66 0.135 220);
  --accent-violet: oklch(0.60 0.165 290);
  --accent-gold:   oklch(0.72 0.140 70);

  /* Decorative */
  --gridline:  oklch(0.925 0.005 90);
  --crosshair: oklch(0.620 0.008 260);

  /* Type */
  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --serif: 'Newsreader', 'Cormorant Garamond', Georgia, serif;

  /* Radius scale — maps to Tailwind: rounded · rounded-lg · rounded-xl · rounded-2xl */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Spacing — Tailwind default ramp; --space-5 = 20px (p-5), not 22 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;
  --space-7: 40px;
  --space-8: 56px;

  --shadow-1: 0 1px 2px rgba(20, 20, 30, 0.04), 0 1px 1px rgba(20, 20, 30, 0.02);
  --shadow-2: 0 6px 16px rgba(20, 20, 30, 0.08), 0 2px 4px rgba(20, 20, 30, 0.04);
  --shadow-3: 0 20px 40px rgba(20, 20, 30, 0.10), 0 6px 12px rgba(20, 20, 30, 0.04);
}

[data-theme="dark"] {
  --bg:        oklch(0.155 0.006 250);
  --bg-soft:   oklch(0.185 0.007 250);
  --panel:     oklch(0.205 0.007 250);
  --panel-hi:  oklch(0.235 0.008 250);
  --border:    oklch(0.285 0.008 250);
  --border-hi: oklch(0.345 0.009 250);

  --text:       oklch(0.965 0.003 250);
  --text-mid:   oklch(0.78 0.005 250);
  --text-dim:   oklch(0.58 0.006 250);
  --text-faint: oklch(0.42 0.006 250);

  --up:    oklch(0.78 0.155 152);
  --down:  oklch(0.70 0.195 25);
  --amber: oklch(0.80 0.135 78);
  --brand: oklch(0.84 0.105 82);

  --accent:        oklch(0.78 0.155 152);
  --accent-cyan:   oklch(0.78 0.135 210);
  --accent-violet: oklch(0.78 0.135 290);
  --accent-gold:   oklch(0.84 0.115 82);

  --gridline:  oklch(0.27 0.007 250);
  --crosshair: oklch(0.55 0.008 250);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  --shadow-2: 0 6px 16px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-3: 0 20px 40px rgba(0, 0, 0, 0.5), 0 6px 12px rgba(0, 0, 0, 0.2);
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*, *::before, *::after { box-sizing: border-box; }