/* Design tokens: "Kedai Kita" (shopfront). APP_PLAN.md §4 roles, renamed for this design:
     reference --laterite → --warm, --teal → --cool, --brass → --hi, --batik-* → --band-*, --maroon → --awning.
   `.theme-light` re-applies the light palette inside a dark page (printable sheets). */
:root, .theme-light {
  /* Surfaces */
  --ground: #FFFDF2;
  --paper: #FFFFFF;
  --sand: #FBF4D6;
  --zebra: #FFFCEB;
  --line: #EDE3BE;
  --line-2: #D6C88F;
  --stroke: #9C8B70;

  /* Text */
  --ink: #2B211A;
  --ink-2: #44372B;
  --muted: #65553F;

  /* Two meaning accents that differ in lightness, not only hue: warm (wrong, attention) and cool (right, done). */
  --warm: #B23B2F;
  --warm-tint: #FCEDEA;
  --cool: #1E4E3A;
  --cool-tint: #E7F1EB;
  --cool-deep: #163B2B;
  --on-cool: #FBF6EC; /* text on a solid --cool fill (done states) */

  /* Highlight and progress: lemon. Text in this colour uses --hi-text. */
  --hi: #F2D23C;
  --hi-tint: #FFF8CC;
  --hi-text: #6B5200;
  /* Focus ring: dark mustard on light surfaces; bands and dark panels reset it to --hi (global.css). */
  --focus: var(--hi-text);

  /* Fills that keep their colour in both themes, for text set on top of them. */
  --warm-fill: #B23B2F;
  --cool-fill: #1E4E3A;
  --night: #221A14;
  --on-night: #FBF6EC;
  --dark-2: #2E2620;
  --dark-3: #3D342C;
  --on-dark-muted: #D3C6B0;

  /* Shopfront bands: header and footer in lemon, hero in lighter lemon. The awning stripes sit on their edges.
     Bands are light, so text on them is dark (--on-band); the dark theme swaps both. */
  --awning: #A3312A;
  --band-deep: #F2D23C;
  --band-hero: #FFF3A6;
  --on-band: #3A2F12;
  --on-band-strong: #1F1A0A; /* headings, brand and active links on the bands */
  --hi-on-band: #6B5200;     /* small accent text on the bands: AA on both lemons */
  --band-line: rgba(31, 26, 10, .45);
  --band-hover: rgba(31, 26, 10, .08);
  --band-pill: rgba(255, 255, 255, .6);
  --focus-band: #1F1A0A;

  --bar-quiz: #6FB08F;
  --bar-cards: #E0857B;

  --font-display: 'Zilla Slab', Rockwell, 'Roboto Slab', Georgia, serif;
  --font-body: Figtree, system-ui, sans-serif;

  --r-card: 14px;
  --r-btn: 8px;
  --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: #15120E;
  --paper: #1E1A15;
  --sand: #26211B;
  --zebra: #1A1612;
  --line: #352E26;
  --line-2: #4C4339;
  --stroke: #8F806A;
  --ink: #F5EFE3;
  --ink-2: #DED4C3;
  --muted: #C0B39E;
  --warm: #F5A99C;
  --warm-tint: #2E1B18;
  --cool: #5FB88C;
  --cool-tint: #172A20;
  --cool-deep: #8FD0AE;
  --on-cool: #0F1F17;
  --hi-text: #F7E07A;
  --night: #0E0B09;
  --hi-tint: #33300F;
  --band-deep: #2E2A0E;
  --band-hero: #37320F;
  --on-band: #FFF6C2;
  --on-band-strong: #FFFFFF;
  --hi-on-band: #F7DC4A;
  --band-line: rgba(255, 255, 255, .55);
  --band-hover: rgba(255, 255, 255, .1);
  --band-pill: rgba(13, 12, 11, .55);
  --focus-band: #F7DC4A;
}