/*
 * Voice Recorder 2.1 — design tokens.
 * Dark is the default (loaded via :root); light overrides via [data-theme="light"].
 * The inline pre-hydrate script in index.html sets data-theme BEFORE paint to avoid FOUC.
 * All colors are OKLCH for perceptually even ramps (Tailwind v4 / shadcn v2 style).
 *
 * Source of truth for the 18 core tokens:
 *   docs/research/2026-04-24-oklch-tokens.md
 * Heatmap + diverging + nodata palette source of truth:
 *   docs/research/2026-04-24-heatmap-palette.md
 *
 * Do NOT invent OKLCH values. Every color literal below is copied from one of those two
 * research reports — if you need a new color, add it to the report first.
 */

:root {
  color-scheme: dark;

  /* ------------------------------------------------------------------ */
  /* SURFACES (hue 286, Tailwind v4 zinc)                               */
  /* ------------------------------------------------------------------ */
  --bg:             oklch(0.141 0.005 285.823);       /* zinc-950, page bg */
  --bg-elevated:    oklch(0.210 0.006 285.885);       /* zinc-900, card / popover */
  --bg-subtle:      oklch(0.274 0.006 286.033);       /* zinc-800, striped rows */

  /* ------------------------------------------------------------------ */
  /* FOREGROUND (text)                                                  */
  /* ------------------------------------------------------------------ */
  --fg:             oklch(0.985 0 0);                 /* shadcn soft white, avoids #FFF glare */
  --fg-muted:       oklch(0.711 0.007 286.22);        /* = Apple #A1A1A6 dark muted */
  --fg-subtle:      oklch(0.552 0.016 285.938);       /* = zinc-500, placeholders only */

  /* ------------------------------------------------------------------ */
  /* BORDERS (translucent white for glassy Apple/Linear feel)           */
  /* ------------------------------------------------------------------ */
  --border:         oklch(1 0 0 / 0.12);              /* matches shadcn dark border */
  --border-subtle:  oklch(1 0 0 / 0.06);              /* hairline separators */

  /* ------------------------------------------------------------------ */
  /* ACCENT (Apple systemBlue dark variant, hue 252)                    */
  /* ------------------------------------------------------------------ */
  --accent:         oklch(0.669 0.181 251.84);        /* = #2997FF, apple.com dark CTA */
  --accent-fg:      oklch(0.141 0.005 285.823);       /* dark text on bright accent */
  --accent-muted:   oklch(0.669 0.181 251.84 / 0.18); /* hover / focus bg tint */

  /* ------------------------------------------------------------------ */
  /* SEMANTIC STATES (lifted L for dark-mode legibility)                */
  /* ------------------------------------------------------------------ */
  --success:        oklch(0.730 0.194 147.44);        /* = Apple systemGreen */
  --success-muted:  oklch(0.730 0.194 147.44 / 0.18);
  --warn:           oklch(0.782 0.171 67.22);         /* = Apple systemOrange dark */
  --warn-muted:     oklch(0.782 0.171 67.22 / 0.18);
  --danger:         oklch(0.663 0.224 28.29);         /* = Apple systemRed dark */
  --danger-muted:   oklch(0.663 0.224 28.29 / 0.18);

  /* Focus ring — denser in dark mode to stay visible */
  --ring:           oklch(0.669 0.181 251.84 / 0.40);

  /* ------------------------------------------------------------------ */
  /* TYPOGRAPHY                                                         */
  /* ------------------------------------------------------------------ */
  --font-sans: 'Inter', 'SF Pro Text', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, 'Menlo', 'Consolas', monospace;

  --step-0: 0.875rem;  /* 14px body-s */
  --step-1: 1rem;      /* 16px body */
  --step-2: 1.125rem;  /* 18px body-l */
  --step-3: 1.25rem;   /* 20px h4 */
  --step-4: 1.5rem;    /* 24px h3 */
  --step-5: 2rem;      /* 32px h2 */
  --step-6: 2.75rem;   /* 44px h1 */
  --step-7: 4rem;      /* 64px hero */

  --leading-tight: 1.2;
  --leading-normal: 1.5;

  /* ------------------------------------------------------------------ */
  /* SPACING                                                            */
  /* ------------------------------------------------------------------ */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ------------------------------------------------------------------ */
  /* RADIUS                                                             */
  /* ------------------------------------------------------------------ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* ------------------------------------------------------------------ */
  /* SHADOWS (dark — denser alpha, shadows read as depth on dark bg)    */
  /* ------------------------------------------------------------------ */
  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.45);
  --shadow-2: 0 4px 12px oklch(0 0 0 / 0.50);
  --shadow-3: 0 10px 40px oklch(0 0 0 / 0.60);

  /* ------------------------------------------------------------------ */
  /* MOTION                                                             */
  /* ------------------------------------------------------------------ */
  --motion-fast:   80ms;
  --motion-normal: 180ms;
  --motion-slow:   320ms;
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);

  /* ------------------------------------------------------------------ */
  /* HEATMAP — viridis 7-stop sequential                                */
  /* (from 2026-04-24-heatmap-palette.md §1.1)                          */
  /* ------------------------------------------------------------------ */
  --heat-0: oklch(28.5% 0.137 318.1);   /* #440154 — lowest / empty bucket */
  --heat-1: oklch(40.9% 0.114 282.0);   /* #423f85 */
  --heat-2: oklch(49.7% 0.084 241.4);   /* #31688e */
  --heat-3: oklch(59.4% 0.094 192.1);   /* #21908d — midpoint, text-flip threshold */
  --heat-4: oklch(66.5% 0.128 166.4);   /* #25ac82 */
  --heat-5: oklch(73.3% 0.165 148.3);   /* #50c46a */
  --heat-6: oklch(91.8% 0.186 102.1);   /* #fde725 — highest */

  /* Cell text color flips at --heat-3 and above */
  --heat-text-on-cold: oklch(1 0 0);          /* white on stops 0-3 */
  --heat-text-on-hot:  oklch(0.141 0.005 285.823); /* near-black on stops 4-6 */

  /* ------------------------------------------------------------------ */
  /* DIVERGING — RdBu 5-class, ColorBrewer                              */
  /* (from 2026-04-24-heatmap-palette.md §2)                            */
  /* ------------------------------------------------------------------ */
  --div-neg-2: oklch(49.2% 0.185  22.4);  /* #b2182b — ≤ −15 pts from target */
  --div-neg-1: oklch(79.1% 0.106  44.7);  /* #f4a582 — −5 to −15 */
  --div-0:     oklch(28.7% 0.011 285.7);  /* dark-theme override: matches bg, lets on-target recede */
  --div-pos-1: oklch(79.6% 0.064 229.7);  /* #92c5de — +5 to +15 */
  --div-pos-2: oklch(50.5% 0.130 252.4);  /* #2166ac — ≥ +15 pts from target */

  /* ------------------------------------------------------------------ */
  /* NO-DATA CELLS (hashed diagonal fill)                               */
  /* (from 2026-04-24-heatmap-palette.md §3)                            */
  /* ------------------------------------------------------------------ */
  --nodata-fill:   oklch(28.5% 0 89.9);   /* #2a2a2a */
  --nodata-stroke: oklch(34.8% 0 89.9);   /* #3a3a3a */
}

/* ============================================================ LIGHT THEME */
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces — hue 286, Apple/Tailwind neutrals */
  --bg:             oklch(1.000 0 0);                  /* pure white */
  --bg-elevated:    oklch(0.985 0 0);                  /* hair-warmer than bg for cards */
  --bg-subtle:      oklch(0.971 0.003 286.35);         /* = Apple #F5F5F7 */

  /* Foreground */
  --fg:             oklch(0.232 0.004 286.10);         /* = Apple #1D1D1F */
  --fg-muted:       oklch(0.540 0.008 286.14);         /* = Apple #6E6E73 (5.07:1 AA) */
  --fg-subtle:      oklch(0.705 0.015 286.067);        /* = zinc-400, placeholder only */

  /* Borders */
  --border:         oklch(0.920 0.004 286.32);         /* = zinc-200 */
  --border-subtle:  oklch(0.967 0.001 286.375);        /* = zinc-100 hairline */

  /* Accent — Apple "Buy" blue, darkened to clear AA with white */
  --accent:         oklch(0.563 0.193 256.16);         /* = #0071E3 (4.70:1) */
  --accent-fg:      oklch(1.000 0 0);                  /* white on accent */
  --accent-muted:   oklch(0.563 0.193 256.16 / 0.12);  /* hover tint */

  /* Semantic states — darker saturation for AA on white */
  --success:        oklch(0.488 0.130 148.95);         /* = #137333 (5.95:1) */
  --success-muted:  oklch(0.488 0.130 148.95 / 0.12);
  --warn:           oklch(0.570 0.136 56.16);          /* = #B25E09 (4.67:1) */
  --warn-muted:     oklch(0.570 0.136 56.16 / 0.12);
  --danger:         oklch(0.553 0.225 27.27);          /* = #D70015 (5.58:1) */
  --danger-muted:   oklch(0.553 0.225 27.27 / 0.12);

  /* Focus ring */
  --ring:           oklch(0.563 0.193 256.16 / 0.20);

  /* Lighter shadows on white */
  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.08);
  --shadow-2: 0 4px 12px oklch(0 0 0 / 0.10);
  --shadow-3: 0 10px 40px oklch(0 0 0 / 0.14);

  /* Diverging mid: on light theme, neutral mid should be the light paper tone */
  --div-0:          oklch(97.6% 0 89.9);               /* #f7f7f7 (ColorBrewer neutral) */

  /* No-data cells */
  --nodata-fill:    oklch(94% 0 89.9);                 /* #eeeeee */
  --nodata-stroke:  oklch(80% 0 89.9);                 /* #cccccc */
}

/* ======================================================== REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast:   0ms;
    --motion-normal: 0ms;
    --motion-slow:   0ms;
  }
}

/* ================================================================= BASE */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-1);
  line-height: var(--leading-normal);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}