/* ── Design tokens — the single source of the palette ─────────────
   Loaded by BOTH app.css's pages and the static legal/pricing pages. It
   exists because those two sets of pages deliberately don't share a
   stylesheet: legal.css skips app.css to avoid inheriting the whole app's
   layout rules for what are mostly plain-text documents. Before this file,
   that meant the palette was written out twice and had to be kept in sync
   by hand -- and dark mode would have made it six blocks across two files.
   Now there is one.

   Consequence worth knowing: the static pages now receive every token,
   including ones they never use (--green, --scrim, --flash-rgb...). That's
   a few hundred bytes of unused custom properties, which is a much better
   trade than two palettes drifting apart.

   Every color in the app routes through these. Adding a color anywhere in
   app.css or legal.css breaks that -- put it here instead.
   Geometry (--r, --r-lg) is theme-independent and set once. */
:root {
  color-scheme: light;
  --bg:       #f4efe9;
  --surface:  #ffffff;
  --surface2: #eee4da;
  /* A shade darker than --surface2, for a block that has to read as raised
     against a --surface card (the paywall feature groups). */
  --surface3: #e3d6c7;
  --border:   #d9c9bd;
  --text:     #3a2f2c;
  --dim:      #5e5555;
  --gold:     #56120a;   /* An oxblood accent, not a gold. The NAME stays --gold because too many rules reference it to rename now. */
  --gold-hi:  #7a2415;
  /* --gold-hi when it is SMALL STATIC TEXT (info popup subheads, the list
     dropdown hint, paywall group titles, the "free" access badge...). Split
     out for the same reason --check was: dark mode's --gold-hi is a green
     interaction tint (button :active, hover borders) that only
     reaches 2.2-2.8:1 as text, and every value light enough to clear AA
     would also make the pressed Start button lighter than its resting
     state. Interaction rules keep --gold-hi; text rules use this. Identical
     to --gold-hi in light mode, where one value does both jobs. */
  --accent-heading: #7a2415;
  /* Checkbox fill. Split out from --gold so the dark theme can quieten a
     fully-selected piece list without touching the primary button; identical
     to --gold here, so light mode is unchanged. */
  --check:    #56120a;
  /* Foreground for anything sitting ON --gold (primary button label, active
     mode tab, the toggle knob when on). Was hard-coded to var(--surface) in
     those three rules, which only worked because --surface happened to be
     white -- in dark mode --surface is a dark card color, so that spelling
     rendered a dark label on a dark-red button. Same value as --surface in
     light mode, so nothing changes here visually. */
  --on-accent: #ffffff;
  /* The accent when it's TEXT on --bg/--surface, as opposed to --gold the
     fill. They can't be one token in dark mode: --gold has to stay dark
     enough for --on-accent to sit on it (4.65:1), which leaves it at only
     3.46:1 as text -- under AA -- and every value light enough to fix the
     text breaks the button. Identical to --gold in light mode, where one
     value comfortably does both jobs (12.4:1 either way). */
  --accent-text: #56120a;
  /* Starred-star fill. Split off --gold-hi so dark can take the star out of
     the green family entirely; identical to --gold-hi here, so light mode is
     unchanged. */
  --star: #7a2415;
  --green      : #3d7a4a;
  --green-btn  : #2f6f4e;
  --red        : #a13d33;
  --muted-tan  : #8a7d6a;  /* muted label tint (paywall pricing card, unstarred list icon) */
  --shadow     : rgba(0, 0, 0, 0.4);   /* dropdown/menu/panel drop shadows */
  --scrim      : rgba(0, 0, 0, 0.6);   /* full-screen dim behind .confirm-overlay */
  --flash-rgb  : 86, 18, 10;          /* --gold as raw channels, for the btn-flash glow */
  --r          : 12px;
  --r-lg       : 20px;
}

/* ── Dark theme — palette "5b" ────────────────────────────────────
   Deep-forest greens over a warm brown-black ground, with a single oxblood
   accent. Replaces the warm-neutral-ink dark theme chosen 2026-08-04.

   Three things distinguish it from the block it replaces:

   1. THE BUTTON IS GREEN, NOT CREAM. The previous dark theme inverted light
      mode's weights: the accent fill became the lightest thing on the screen
      and carried dark text. This one does not invert. --gold is a
      desaturated forest green (#405C4A) carrying a cream label
      (--on-accent #F2E9D6, 6.3:1), which is structurally the same
      relationship light mode has -- a coloured fill with a light label. So
      --on-accent is LIGHT in both themes now; the previous block's long
      comment explaining why it had to be dark here no longer applies and
      has been removed rather than preserved.

   2. THERE IS ONE RED, AND IT IS NOT A FILL. --accent-text (#A65349) is the
      logo mark, the dropdown caret and the composer names. It carries light
      mode's oxblood identity into dark without becoming a button.
      TWO EXCEPTIONS, both decorative marks rather than surfaces behind text
      or controls, so no contrast floor rides on either, and both belong to
      the logo's family rather than to the green of the buttons:
        - the playing screen's equalizer bars (.eq-icon span);
        - the starred star (--star), added v6.32 -- on the green it sat too
          close to the surfaces behind it to read as a shape.
      Nothing else may fill with this.

   3. THE GROUND IS NOT BLACK. The previous block used #000000. This one
      lifts to #17120D and warms every surface with it, so the app reads as
      night rather than as void. All five steps (bg -> surface -> surface2
      -> surface3 -> border) keep a visible interval.

   KNOWN CONTRAST EXCEPTION: --accent-text on --surface measures 3.2:1,
   under WCAG AA for body text. Accepted deliberately, designer-signed-off.
   Its only small-text use is the composer name in the piece list, which
   carries no unique information -- the work title sits directly beneath it
   in --text at full contrast. Do NOT "fix" this by lightening
   --accent-text without raising it with the designer first; every value
   that clears 4.5:1 loses the depth the colour was chosen for.

   Light mode is deliberately NOT the inverse of this and was not touched
   when this landed -- it was already right.

   Two blocks, because an explicit user choice must beat the OS preference
   in BOTH directions. theme.js writes data-theme onto <html>; the media
   query below is scoped :not([data-theme="light"]) so "light" opts back
   out of a dark OS, and the attribute block after it turns dark on from a
   light OS. Neither can be dropped: without the :not() a user who picked
   light on a dark phone would need a whole restated light block to win,
   and without the attribute block dark could only ever follow the OS.

   The two blocks are byte-identical and must stay that way. CSS has no way
   to share one declaration block between a media query and a plain
   selector, so this is the one duplication the file can't remove -- kept
   adjacent so a drift is visible in the diff rather than buried. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:       #17120D;
    --surface:  #211A13;
    --surface2: #2A2219;
    --surface3: #362C20;
    --border:   #473B2B;
    --text:     #EFE3CD;
    --dim:      #A2947C;
    /* Desaturated forest green. Keeps the name --gold because too many rules
       reference it to rename now; it has not been a gold in either theme for
       some time. */
    --gold:     #405C4A;
    --gold-hi:  #486850;
    /* Same green, lifted 34.5% -> 55.7% lightness (hue/saturation near
       unchanged), for small static text only. Clears AA everywhere it is
       used: 5.98 on --surface, 5.44 on --surface2, 4.75 on --surface3.
       --gold-hi keeps the darker value for fills and interaction states. */
    --accent-heading: #7BA189;
    /* Light in BOTH themes now -- the dark fill was only needed while the
       dark accent was cream. See note 1 in the block comment above. */
    --on-accent: #F2E9D6;
    /* Oxblood. The one red in the theme: logo mark, caret, composer names.
       Never a fill. */
    --accent-text: #A65349;
    /* The star leaves the green family in dark. On --gold-hi it was a green
       a step or two off the surfaces behind it and read as a smudge; a thin
       oxblood outline was tried first (v6.30.7-dev) and was too faint at
       menu size to be worth the rule. This is the second sanctioned use of
       --accent-text as a fill -- see note 2 in the block comment above. */
    --star: var(--accent-text);
    --green:    #72947B;
    --green-btn: #46654F;
    --red:      #CF8B83;
    --muted-tan: #8A7D6A;
    /* Checkbox fill only. Deliberately the same value as --gold right now:
       the earlier, lighter grey-green read washed out beside the Start
       button's green. Kept as its own token rather than folded back into
       --gold so nudging the checkboxes lighter again stays a one-line edit. */
    --check:    #405C4A;
    --shadow:   rgba(0, 0, 0, 0.7);
    --scrim:    rgba(0, 0, 0, 0.8);
    --flash-rgb: 64, 92, 74;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:       #17120D;
  --surface:  #211A13;
  --surface2: #2A2219;
  --surface3: #362C20;
  --border:   #473B2B;
  --text:     #EFE3CD;
  --dim:      #A2947C;
  /* Desaturated forest green. Keeps the name --gold because too many rules
     reference it to rename now; it has not been a gold in either theme for
     some time. */
  --gold:     #405C4A;
  --gold-hi:  #486850;
  /* Same green, lifted 34.5% -> 55.7% lightness (hue/saturation near
     unchanged), for small static text only. Clears AA everywhere it is
     used: 5.98 on --surface, 5.44 on --surface2, 4.75 on --surface3.
     --gold-hi keeps the darker value for fills and interaction states. */
  --accent-heading: #7BA189;
  /* Light in BOTH themes now -- the dark fill was only needed while the
     dark accent was cream. See note 1 in the block comment above. */
  --on-accent: #F2E9D6;
  /* Oxblood. The one red in the theme: logo mark, caret, composer names.
     Never a fill. */
  --accent-text: #A65349;
  /* The star leaves the green family in dark. On --gold-hi it was a green
     a step or two off the surfaces behind it and read as a smudge; a thin
     oxblood outline was tried first (v6.30.7-dev) and was too faint at
     menu size to be worth the rule. This is the second sanctioned use of
     --accent-text as a fill -- see note 2 in the block comment above. */
  --star: var(--accent-text);
  --green:    #72947B;
  --green-btn: #46654F;
  --red:      #CF8B83;
  --muted-tan: #8A7D6A;
  /* Checkbox fill only. Deliberately the same value as --gold right now:
     the earlier, lighter grey-green read washed out beside the Start
     button's green. Kept as its own token rather than folded back into
     --gold so nudging the checkboxes lighter again stays a one-line edit. */
  --check:    #405C4A;
  --shadow:   rgba(0, 0, 0, 0.7);
  --scrim:    rgba(0, 0, 0, 0.8);
  --flash-rgb: 64, 92, 74;
}