/* Design tokens — PLAN.md §4. `.theme-light` re-applies the light palette inside a dark page (printable sheets). */
:root, .theme-light {
  --ground: #FFFDF8;
  --ink: #1C1A17;
  --ink-2: #3F3A33;
  --muted: #5B554B;
  --line: #E7E1D4;
  --line-2: #CFC8BA;
  --sand: #F3EEE3;
  --paper: #FFFFFF;
  --laterite: #9A2F2F;
  --laterite-tint: #FFF6F3;
  --teal: #1F5F5B;
  --teal-tint: #EAF4F3;
  --teal-deep: #17494A;
  --teal-text-on-dark: #BFE3DF;
  --on-teal: #FFFDF8; /* text on a solid --teal fill (done states) */
  --brass: #D9A441;
  --brass-tint: #FBEFD9;
  --brass-text: #7A4A05;
  /* Focus ring: dark brass on light surfaces (7:1 on cream/white/sand); resolved here, so the dark theme's
     --brass-text gives a light gold ring. Bands and dark panels reset it to --brass (global.css). */
  --focus: var(--brass-text);
  --dark-2: #2A2722;
  --dark-3: #3A3630;
  --on-dark-muted: #CFC8BA;

  /* Fills that keep their colour in both themes, for text set on top of them. */
  --laterite-fill: #9A2F2F;
  --teal-fill: #1F5F5B;
  --night: #1C1A17;
  --on-night: #FFFDF8;

  /* Batik (awan larat) bands: header, hero, footer. */
  --maroon: #7A2228;
  --batik-deep: #17494A;
  --batik-hero: #1F5F5B;
  --on-batik: #F1EAE6;
  --brass-on-batik: #F5D58F; /* small gold text on the bands: AA on light hero, AAA on dark */

  --bar-quiz: #5FB3AC;
  --bar-cards: #E07A72;
  --zebra: #FBFAF6;
  --stroke: #9A8F7C;

  --font-display: 'DM Serif Display', serif;
  --font-body: Figtree, system-ui, sans-serif;

  --r-card: 14px;
  --r-btn: 10px;
  --r-pill: 999px;

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

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

/* Dark theme. Base.astro sets data-theme from the visitor's choice, else the device setting. */
:root[data-theme='dark'] {
  color-scheme: dark;
  --ground: #161412;
  --paper: #1F1C19;
  --ink: #F3EEE3;
  --ink-2: #DAD3C6;
  --muted: #BDB5A7;
  --line: #34302B;
  --line-2: #4A453E;
  --sand: #24211D;
  --zebra: #1B1916;
  --stroke: #8A8172;
  --laterite: #EFA397;
  --laterite-tint: #2C1B19;
  --teal: #86CCC4;
  --teal-tint: #1A2E2C;
  --teal-deep: #A9DCD6;
  --on-teal: #10201F;
  --brass-tint: #33291A;
  --brass-text: #EBC47E;
  --night: #0D0C0B;
  --batik-deep: #10393A;
  --batik-hero: #174A47;
}