/* Design tokens: "A · Lab Notebook" (chosen 27 Oct 2026). Graph paper, washi tape, mint / lilac / peach pastels.
   Token roles follow exam-study-template APP_PLAN §4. `.theme-light` re-applies the light palette inside a dark
   page (printable sheets). The quiz site copies this file unchanged. */
:root, .theme-light {
  /* Surfaces */
  --ground: #FBFCF6;      /* page background, under the graph-paper grid */
  --grid: #E3EFE6;        /* graph-paper lines */
  --paper: #FFFFFF;       /* cards */
  --sand: #F2F6EF;        /* quiet panels, hover */
  --zebra: #F8FAF5;
  --line: #D6E2DA;
  --line-2: #B4C6BB;

  /* Text */
  --ink: #24303A;         /* headings, outlines, solid buttons */
  --ink-2: #33414C;       /* body */
  --muted: #4D5A63;       /* captions (7:1 on --ground) */

  /* Outlines and the offset "sticker" shadow */
  --outline: #24303A;
  --shadow: #C9EEDB;

  /* Pastel fills (dark text on top in light, light text on top in dark) */
  --mint: #C9EEDB;
  --lilac: #DCD1F7;
  --peach: #FFD8C4;
  --butter: #FFF4D6;
  --sky: #D3E8FA;

  /* Meaning accents: right (deep green) vs wrong (brick). They differ in lightness, not only hue. */
  --right: #1E5E4A;
  --right-tint: #E3F5EC;
  --wrong: #B4432A;
  --wrong-tint: #FFEDE5;

  /* Highlight / progress accent (lilac) */
  --accent: #9C86E0;      /* progress fills, decoration */
  --accent-tint: #EFEAFC;
  --accent-text: #5B3FB5; /* links on tints, eyebrows (6:1 on white) */
  --progress: #6CC7A0;    /* reading progress bars */

  /* Fills that keep their colour in both themes, for text set on them */
  --right-fill: #1E5E4A;
  --wrong-fill: #B4432A;
  --night: #1A232B;
  --on-night: #FBFCF6;

  --focus: #5B3FB5;       /* focus ring: 3:1+ on every light surface */

  --font-display: Fredoka, 'Baloo 2', system-ui, sans-serif;
  --font-body: Nunito, system-ui, sans-serif;

  --r-card: 14px;
  --r-btn: 999px;
  --r-pill: 999px;
  --border: 2px;

  --max: 1180px;
  --gutter: 24px;
  --gap: 40px;
  --tabbar-h: 60px; /* phone bottom tab bar (Header.astro), without the safe-area inset */
}

@media (max-width: 640px) {
  :root { --gutter: 16px; --gap: 32px; }
}

/* Dark theme. Base.astro sets data-theme from the visitor's choice, else the device setting.
   Night notebook: slate paper with faint green grid; pastels become deep tints with light text. */
:root[data-theme='dark'] {
  color-scheme: dark;
  --ground: #141B21;
  --grid: #1D2930;
  --paper: #1B242B;
  --sand: #212C34;
  --zebra: #19222A;
  --line: #2E3B43;
  --line-2: #45555E;

  --ink: #EEF3EF;
  --ink-2: #D7DFDA;
  --muted: #AEBBB4;

  --outline: #8FA69B;
  --shadow: #24493B;

  --mint: #21473A;
  --lilac: #352D5A;
  --peach: #4E3024;
  --butter: #433B21;
  --sky: #1F3A52;

  --right: #8FD9B8;
  --right-tint: #183329;
  --wrong: #F3A88E;
  --wrong-tint: #3A2119;

  --accent: #B3A1EE;
  --accent-tint: #29233F;
  --accent-text: #C9BCF5;
  --progress: #5DB592;

  --night: #0E1418;
  --focus: #C9BCF5;
}