/*
 * Design tokens: the ONE place the site's colours live.
 *
 * Every page links this file (/tokens.css): the home page, /legal, /submit,
 * /subscribe, /release-notes and the server-rendered theatre/city/show pages
 * in src/seo.ts. Change a value here and every page follows. Before Oct 2026
 * each page carried its own copy of these blocks.
 *
 * Three themes, all dark:
 *   playbill  (default) cool near-black, muted amber, muted rose
 *   spotlight warm, high-contrast, theatrical
 *   fynbos    an option, never the default: soft sage green with a dusty protea-pink accent
 * The Worker always writes data-theme="playbill|spotlight|fynbos" on <html> (see
 * withTheme() in src/worker.ts); :root carries playbill as the fallback.
 *
 * Emails can't load stylesheets, so src/lib/subscribers.ts and
 * src/subscriberReport.ts repeat the playbill hex values inline. Keep them in
 * step when this palette changes.
 *
 * FOR THE DESIGNER: these names are what the code uses. Rename nothing; change
 * values freely. A new light theme is a new html[data-theme="..."] block below.
 */

:root{
  /* Genre hues, shared by every theme: card tags and filter dots. */
  --g-drama:#D94156;
  --g-comedy:#F4C95D;
  --g-musical:#8E6FD8;
  --g-dance:#5BBFA8;
  --g-music:#E08A4C;
  --g-kids:#6FA8DC;
  --g-festival:#C77FB4;
  /* 'other' = guessGenre() couldn't classify it. Deliberately the most muted
     hue of the set: it's a real bucket, not a headline category. */
  --g-other:#8A949C;
}

/* Playbill: default. Cool near-black base + muted-amber accent + muted rose. */
:root, html[data-theme="playbill"]{
  --stage:#14171A;        /* page background */
  --stage-2:#191D21;      /* raised background: inputs, chips */
  --card:#1E2429;         /* show cards, panels */
  --card-edge:#2F373E;    /* borders and dividers */
  --spot:#E3B667;         /* primary accent: title, Book buttons, active chips */
  --spot-dim:#AF8C4E;     /* secondary accent: small links, labels */
  --crimson:#C86B72;      /* ticker strip, warnings, the italic tagline highlight */
  --dance:#5FA6A0;        /* success/confirmation accents on forms */
  --ivory:#E9ECEE;        /* body text */
  --ivory-dim:#97A1A9;    /* secondary text */
  --ink:#14171A;          /* text on accent backgrounds */
  --glow-1:rgba(227,182,103,.10); --glow-2:rgba(95,166,160,.05);
  --noise-op:.025; --motif-op:.055;
  --bar-bg:rgba(20,23,26,.92);
}

/* Spotlight: warm, high-contrast, theatrical. */
html[data-theme="spotlight"]{
  --stage:#16120F; --stage-2:#1E1813; --card:#241D16; --card-edge:#3A2F22;
  --spot:#F4C95D; --spot-dim:#C99E3F; --crimson:#D94156; --dance:#5BBFA8;
  --ivory:#F5EBDA; --ivory-dim:#B8A98F; --ink:#16120F;
  --glow-1:rgba(244,201,93,.16); --glow-2:rgba(217,65,86,.06);
  --noise-op:.05; --motif-op:.06;
  --bar-bg:rgba(22,18,15,.92);
}

/* Fynbos: an optional theme, never the default. Built on colour theory:
   - analogous sage greens (hue ~150, saturation ~10%) for every surface,
     from stage to card edge, so the page reads as one calm grey-green field
     like fynbos foliage rather than a saturated green;
   - the accent is the COMPLEMENT of that green, a dusty protea pink (hue ~345),
     kept muted (saturation ~45%) so it leads without glaring;
   - a soft terracotta (split-complement) for the ticker and a mint
     (analogous) for success states round out the palette.
   Oct 2026: softened from the first cut (#0F1714 stage, #EFA7B9 accent),
   which read as harsh.
   Contrast (WCAG): body text 13.6:1 on cards, secondary text 6.5:1, the
   accent 7.2:1 on cards, dark text on the accent 8.1:1, spot-dim 4.9:1.
   Every pairing clears AA (4.5:1). Genre hues are shared with the other themes. */
html[data-theme="fynbos"]{
  --stage:#121614; --stage-2:#161B18; --card:#1B211E; --card-edge:#2C3530;
  --spot:#D99CAB; --spot-dim:#AE808C; --crimson:#C98B78; --dance:#8CBFA0;
  --ivory:#E6EBE7; --ivory-dim:#9AA69F; --ink:#121614;
  --glow-1:rgba(217,156,171,.07); --glow-2:rgba(140,191,160,.05);
  --noise-op:.03; --motif-op:.05;
  --bar-bg:rgba(18,22,20,.92);
}