/* ==========================================================================
   Design tokens — Unchosen Child
   Light theme is the default; dark theme overrides via [data-theme="dark"]
   and via prefers-color-scheme when the visitor hasn't chosen explicitly.
   ========================================================================== */

:root {
  /* ---- Light theme ---- */
  --bg: oklch(97.5% 0.008 75);
  --bg-elevated: oklch(99% 0.004 75);
  --surface: oklch(94% 0.02 70);
  --surface-2: oklch(90% 0.022 70);
  --border: oklch(85% 0.015 70);
  --border-strong: oklch(74% 0.02 65);

  --text: oklch(20% 0.012 50);
  --text-muted: oklch(38% 0.015 55);
  --text-faint: oklch(52% 0.02 60);

  --accent: oklch(68% 0.11 80);
  --accent-strong: oklch(58% 0.12 76);
  --accent-text: oklch(18% 0.02 50);

  --quote: oklch(32% 0.05 45);
  --link: oklch(45% 0.08 45);
  --link-hover: oklch(58% 0.1 70);
  --success: oklch(42% 0.09 145);
  --error: oklch(48% 0.16 25);

  --ink: oklch(20% 0.012 50);
  --ink-text: oklch(95% 0.01 75);

  --shadow-sm: 0 1px 2px oklch(20% 0.02 50 / 0.07), 0 1px 1px oklch(20% 0.02 50 / 0.04);
  --shadow-md: 0 10px 28px oklch(20% 0.02 50 / 0.10), 0 2px 8px oklch(20% 0.02 50 / 0.06);
  --shadow-lg: 0 24px 56px oklch(20% 0.02 50 / 0.16), 0 8px 20px oklch(20% 0.02 50 / 0.09);

  color-scheme: light;

  /* ---- Shape & motion (theme-independent) ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 150ms;
  --dur-med: 300ms;
  --dur-slow: 450ms;

  /* ---- Type & layout ---- */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Poppins', system-ui, sans-serif;

  --header-h: 64px;
  --page-turn-h: 68px;
  --max-wide: 1200px;
  --max-narrow: 860px;
  --gutter: 5vw;
}

:root[data-theme="dark"] {
  --bg: oklch(15% 0.014 50);
  --bg-elevated: oklch(18% 0.016 52);
  --surface: oklch(21% 0.018 50);
  --surface-2: oklch(25% 0.02 50);
  --border: oklch(32% 0.02 55);
  --border-strong: oklch(40% 0.024 55);

  --text: oklch(92% 0.01 75);
  --text-muted: oklch(78% 0.014 70);
  --text-faint: oklch(64% 0.02 65);

  --accent: oklch(74% 0.12 80);
  --accent-strong: oklch(80% 0.12 82);
  --accent-text: oklch(14% 0.02 50);

  --quote: oklch(80% 0.06 72);
  --link: oklch(76% 0.09 75);
  --link-hover: oklch(85% 0.08 78);
  --success: oklch(75% 0.1 145);
  --error: oklch(70% 0.16 25);

  --ink: oklch(10% 0.012 50);
  --ink-text: oklch(95% 0.01 75);

  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.35);
  --shadow-md: 0 12px 30px oklch(0% 0 0 / 0.5), 0 2px 8px oklch(0% 0 0 / 0.35);
  --shadow-lg: 0 28px 60px oklch(0% 0 0 / 0.6), 0 8px 22px oklch(0% 0 0 / 0.4);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: oklch(15% 0.014 50);
    --bg-elevated: oklch(18% 0.016 52);
    --surface: oklch(21% 0.018 50);
    --surface-2: oklch(25% 0.02 50);
    --border: oklch(32% 0.02 55);
    --border-strong: oklch(40% 0.024 55);

    --text: oklch(92% 0.01 75);
    --text-muted: oklch(78% 0.014 70);
    --text-faint: oklch(64% 0.02 65);

    --accent: oklch(74% 0.12 80);
    --accent-strong: oklch(80% 0.12 82);
    --accent-text: oklch(14% 0.02 50);

    --quote: oklch(80% 0.06 72);
    --link: oklch(76% 0.09 75);
    --link-hover: oklch(85% 0.08 78);
    --success: oklch(75% 0.1 145);
    --error: oklch(70% 0.16 25);

    --ink: oklch(10% 0.012 50);
    --ink-text: oklch(95% 0.01 75);

    --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.35);
    --shadow-md: 0 12px 30px oklch(0% 0 0 / 0.5), 0 2px 8px oklch(0% 0 0 / 0.35);
    --shadow-lg: 0 28px 60px oklch(0% 0 0 / 0.6), 0 8px 22px oklch(0% 0 0 / 0.4);

    color-scheme: dark;
  }
}