/* ── Core: structural primitives + color palette ────────── */
:root {
  /* Spacing scale */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;

  --touch-target: 44px;

  /* Radius scale */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Typography */
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --font-size-caption: 0.6875rem;
  --font-size-meta: 0.75rem;
  --font-size-ui: 0.875rem;
  --font-size-body: 1rem;
  --font-size-title: 1.125rem;
  --font-size-display: clamp(1.25rem, 2.1vw, 1.4375rem);

  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-body: 1.5;
  --line-height-loose: 1.6;

  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-title: 650;
  --font-weight-bold: 700;

  --tracking-label: 0.02em;
  --tracking-overline: 0.08em;
  --tracking-tight: -0.03em;

  /* ── Color palette ────────────────────────────────────── */
  /* Sparse 5-stop ramps. Gaps (200/400/600/800) intentionally */
  /* reserved for future infill as the design system grows.    */

  /* Mauve — cool warm-neutral (dark canvas family) */
  --color-mauve-100: oklch(88% 0.02 352deg);
  --color-mauve-300: oklch(63% 0.035 352deg);
  --color-mauve-500: oklch(40% 0.04 354deg);
  --color-mauve-700: oklch(25% 0.027 354deg);
  --color-mauve-900: oklch(18% 0.014 347deg);

  /* Sand — warm neutral (dual-role: dark-mode text + light canvas/text) */
  --color-sand-100: oklch(99% 0.003 95deg);
  --color-sand-300: oklch(93% 0.04 90deg);
  --color-sand-500: oklch(72% 0.032 76deg);
  --color-sand-700: oklch(52% 0.016 67deg);
  --color-sand-900: oklch(22% 0.007 67deg);

  /* Teal — muted brand alternative, centered on the reference swatch */
  --color-teal-100: oklch(90% 0.016 198deg);
  --color-teal-300: oklch(68% 0.03 198deg);
  --color-teal-500: oklch(48.18% 0.0382 198.4deg);
  --color-teal-700: oklch(34% 0.032 198deg);
  --color-teal-900: oklch(22% 0.024 198deg);

  /* Red — danger / destructive (true red, hue ~19deg) */
  --color-red-100: oklch(92% 0.05 20deg);
  --color-red-300: oklch(75% 0.15 20deg);
  --color-red-500: oklch(60% 0.19 19deg);
  --color-red-700: oklch(49.14% 0.186 19deg);
  --color-red-900: oklch(32% 0.14 19deg);

  /* Coral — brand action (warm red-orange, hue ~37deg) */
  --color-coral-100: oklch(93% 0.05 37deg);
  --color-coral-300: oklch(78% 0.14 35deg);
  --color-coral-500: oklch(58.5% 0.174 30.5deg);
  --color-coral-700: oklch(48% 0.16 33deg);
  --color-coral-900: oklch(30% 0.12 33deg);

  /* Amber — warning (hue ~85deg) */
  --color-amber-100: oklch(96% 0.05 92deg);
  --color-amber-300: oklch(84.05% 0.124 93deg);
  --color-amber-500: oklch(70% 0.13 88deg);
  --color-amber-700: oklch(54.23% 0.101 85deg);
  --color-amber-900: oklch(35% 0.08 85deg);

  /* Green — success (unified hue ~155deg) */
  --color-green-100: oklch(92% 0.05 155deg);
  --color-green-300: oklch(75% 0.1 155deg);
  --color-green-500: oklch(58% 0.12 155deg);
  --color-green-700: oklch(43.75% 0.09 155deg);
  --color-green-900: oklch(26% 0.06 155deg);

  /* Cyan — focus / info-cool (hue ~200deg) */
  --color-cyan-100: oklch(93% 0.05 200deg);
  --color-cyan-300: oklch(80% 0.15 195deg);
  --color-cyan-500: oklch(65% 0.14 200deg);
  --color-cyan-700: oklch(55% 0.15 195deg);
  --color-cyan-900: oklch(35% 0.12 200deg);

  /* Blue — info (hue ~250deg) */
  --color-blue-100: oklch(94% 0.04 250deg);
  --color-blue-300: oklch(80% 0.12 250deg);
  --color-blue-500: oklch(62% 0.17 255deg);
  --color-blue-700: oklch(48% 0.17 258deg);
  --color-blue-900: oklch(30% 0.13 260deg);
}

/* ── Semantic layer: role-based tokens, theme-scoped ────── */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg: var(--color-mauve-900);
    --surface: color-mix(in oklch, var(--color-mauve-900) 45%, var(--color-mauve-700));
    --surface-hover: var(--color-mauve-700);
    --text: var(--color-sand-300);
    --text-muted: var(--color-sand-500);
    --border: color-mix(in oklch, var(--color-mauve-700) 65%, var(--color-mauve-500));
    --accent: var(--color-teal-500);
    --focus: var(--color-teal-100);
    --success: var(--color-green-500);
    --warning: var(--color-amber-300);
    --error: var(--color-red-700);
    --info: var(--color-blue-300);

    --scrollbar-thumb: color-mix(in oklch, var(--color-mauve-700) 33%, var(--color-mauve-500));
  }
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --bg: color-mix(in oklch, var(--color-sand-100) 58%, var(--color-sand-300));
    --surface: var(--color-sand-100);
    --surface-hover: var(--color-sand-300);
    --text: var(--color-sand-900);
    --text-muted: var(--color-sand-700);
    --border: color-mix(in oklch, var(--color-sand-300) 43%, var(--color-sand-500));
    --accent: var(--color-teal-500);
    --focus: var(--color-teal-900);
    --success: var(--color-green-700);
    --warning: var(--color-amber-700);
    --error: var(--color-red-700);
    --info: var(--color-blue-700);

    --scrollbar-thumb: var(--color-sand-500);
  }
}

/* ── Semantic: derived / theme-agnostic ───────────────── */
:root {
  /* Always near-white — buttons/bubbles on --accent should read light    */
  /* regardless of theme (replaces the prior hardcoded `color: white`).   */
  --text-on-accent: var(--color-sand-100);
  --accent-hover: color-mix(in oklch, var(--accent) 88%, black);
}