/* Shared design tokens. Linked before each page's own <style>.
   Light: text colours meet WCAG AA (≥4.5:1) on white and on --blue-100 chips; --blue-400 is for borders and icons only.
   Dark mode: set by data-theme="dark" on <html> (assets/nav.js), or by the device when no choice is saved. */
:root {
  color-scheme: light;
  --blue-50: #f2fbff;    /* page surfaces */
  --blue-100: #dff5ff;   /* chips, selected fills */
  --blue-200: #bfeeff;   /* soft borders */
  --blue-400: #5ec4ea;   /* decorative borders, icons, focus accents */
  --blue-500: #1b6e9c;   /* secondary blue text (5.6:1) */
  --blue-600: #17769d;   /* links and blue text (5.1:1 on white, 4.5:1 on chips) */
  --ink: #16384a;
  --ink-2: #315b70;      /* body text inside cards */
  --muted: #4a6f82;      /* secondary text (5.4:1 on white, 4.8:1 on chips) */
  --border: #d5e9f1;
  --line: #bfe9f7;       /* soft blue component borders */
  --line-rgb: 75 177 218;
  --surface: #ffffff;    /* cards, buttons */
  --surface-rgb: 255 255 255;
  --tint-1: #f5fcff;     /* faint blue fills */
  --tint-2: #eaf8ff;     /* light blue fills */
  --tint-3: #dff5ff;     /* chip fills */
  --page-1: #f7fdff;     /* page background gradient */
  --page-2: #e7f8ff;
  --page-3: #dff4ff;
  --glow-rgb: 190 238 255;
  --shadow-rgb: 28 111 145;
  --ok: #1f7a55;
  --ok-bg: #edfbf4;
  --ok-line: #75c8a4;
  --bad: #b83a52;
  --bad-bg: #fff5f5;
  --bad-line: #e9868c;
  --warm-bg: #fff4e0;
  /* Semantic aliases let every background palette recolor controls together.
     Filled controls stay dark enough for white text, even in dark mode. */
  --accent: var(--blue-600);
  --accent-hover: #136c90;
  --accent-focus: var(--blue-600);
  --control-line: #5f93aa;
  --button-start: #1a7ea6;
  --button-end: #136c90;
  --btn-grad: linear-gradient(135deg, var(--button-start), var(--button-end));
  --radius-control: 10px;
  --radius-card: 16px;
  --radius-pill: 999px;
  /* Layout contract: use these shared measures, not page-specific offsets. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --layout-content-max: 1040px;
  --layout-gutter: 16px;
  --layout-companion-rail: 140px;
  --control-height: 44px;
  --study-card-padding: 16px;
  --study-card-gap: 12px;
  --study-card-rail: 44px;
  --shadow: 0 18px 50px rgb(var(--shadow-rgb) / .16);

  /* Layers, lowest to highest. One scale for every page; use these instead of raw z-index numbers.
     The site header (.site-nav) is one stacking context: the sidebar, ☰ panel and phone tab bar all live at --z-nav. */
  --z-sticky: 3;        /* in-page toolbars that stick while scrolling */
  --z-tool: 24;         /* tools the learner opens and places (writing board) */
  --z-dock: 30;         /* Sandy's corner dock on wide screens (Sandy, 💤, progress pill): under menus and dialogs */
  --z-popover: 60;      /* in-page dialogs and the quiz feedback sheet */
  --z-toast: 70;        /* short notes (night reminder, undo toast) */
  --z-nav: 100;         /* site header: sidebar, top bar, ☰ panel, phone tab bar */
  --z-dock-bar: 105;    /* phones: Sandy's dock sits inside the tab bar, so it must sit just above it */
  --z-effect: 120;      /* hearts, pops and the dragged snack: decorative, never take clicks */
  --z-skip: 150;        /* skip link */

  /* Sandy's dock. Wide screens: a column in the companion rail. Phones: the right end of the bottom tab bar. */
  --dock-gap: 16px;                 /* dock distance from the viewport edge on wide screens */
  --dock-sandy: 56px;               /* Sandy's size inside the phone tab bar */
  --dock-bar-reserve: 124px;        /* tab bar space kept free for Sandy + her 🍙 button (snacks and sleep) on phones */
}

/* Dark: a calm night-time study room — deep blue-slate, soft light text, the same blue accents */
:root[data-theme="dark"] {
  color-scheme: dark;
  --blue-50: #172630;
  --blue-100: #1e3a4b;
  --blue-200: #2b5267;
  --blue-400: #5ec4ea;
  --blue-500: #8fd0ee;
  --blue-600: #7ccbec;
  --accent-hover: #a7def3;
  --control-line: #6894aa;
  --ink: #e4eff5;
  --ink-2: #c4d8e3;
  --muted: #9cb5c3;
  --border: #2b4555;
  --line: #2f5266;
  --line-rgb: 94 170 210;
  --surface: #182631;
  --surface-rgb: 24 38 49;
  --tint-1: #1a2a35;
  --tint-2: #1d3140;
  --tint-3: #1f3a4b;
  --page-1: #0f1a22;
  --page-2: #122230;
  --page-3: #10202b;
  --glow-rgb: 40 84 110;
  --shadow-rgb: 0 0 0;
  --ok: #7fd8ae;
  --ok-bg: #143628;
  --ok-line: #3f8f6c;
  --bad: #f3a3b1;
  --bad-bg: #3a1f26;
  --bad-line: #9c4d5c;
  --warm-bg: #3a2d1c;
  --shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --blue-50: #172630;
    --blue-100: #1e3a4b;
    --blue-200: #2b5267;
    --blue-400: #5ec4ea;
    --blue-500: #8fd0ee;
    --blue-600: #7ccbec;
    --accent-hover: #a7def3;
    --control-line: #6894aa;
    --ink: #e4eff5;
    --ink-2: #c4d8e3;
    --muted: #9cb5c3;
    --border: #2b4555;
    --line: #2f5266;
    --line-rgb: 94 170 210;
    --surface: #182631;
    --surface-rgb: 24 38 49;
    --tint-1: #1a2a35;
    --tint-2: #1d3140;
    --tint-3: #1f3a4b;
    --page-1: #0f1a22;
    --page-2: #122230;
    --page-3: #10202b;
    --glow-rgb: 40 84 110;
    --shadow-rgb: 0 0 0;
    --ok: #7fd8ae;
    --ok-bg: #143628;
    --ok-line: #3f8f6c;
    --bad: #f3a3b1;
    --bad-bg: #3a1f26;
    --bad-line: #9c4d5c;
    --warm-bg: #3a2d1c;
    --shadow: 0 18px 50px rgba(0, 0, 0, .35);
  }
}