/* The public site's theme: every value the design is made of, named.
 *
 * Loaded before site.css. Tokens only. It defines no component and no
 * layout, so nothing here can change where anything sits.
 *
 * ── What this is for ──────────────────────────────────────────────────
 *
 * Before this file the theme existed, it was just not written down: 41
 * raw hex values, 55 rgba literals, 37 font sizes, 13 corner radii and
 * 11 shadows across 721 lines, agreeing with each other by habit. The
 * audit is in briefs/15_theme_audit.md and the counts can be reproduced
 * with scripts/audit_theme.py.
 *
 * ── The one rule ──────────────────────────────────────────────────────
 *
 * Every value here is exactly what the site already rendered on 24
 * September 2026. The extraction is meant to be invisible: the
 * screenshots before and after are compared pixel for pixel, and a
 * difference is a bug in the extraction, not an improvement.
 *
 * Changing any of these values is a separate, reviewable step.
 *
 * ── Dark mode ─────────────────────────────────────────────────────────
 *
 * Every token has a dark value, including the ones that do not change.
 * Before this, five of thirteen were redefined and everything else was
 * hand written per rule, so each new section arrived with its own dark
 * override and the next one would too. A rule outside this file that
 * sets a colour inside a prefers-color-scheme block is a bug, and
 * tests/test_theme.py fails on it.
 *
 * ── admin.css is not this ─────────────────────────────────────────────
 *
 * The dashboard keeps its own palette on purpose; see the standing
 * rules. It also gives six class names different meanings, which is why
 * this file defines no components: a shared cascade is the first thing
 * that would put those in the same fight.
 */

:root {
  /* ── Brand ──────────────────────────────────────────────────────────
     The five that have held across every sheet and the mockup. */
  --navy: #13202C;
  --navy2: #1C2C3B;
  --mustard: #F2B632;
  --red: #C8202A;

  /* Two greens, because one cannot do both jobs: the brand green is
     4.82:1 on navy and 3.43:1 on a white card, which is under the bar
     for the small bold text that uses it. */
  --green: #2E9E4F;
  --green-ink: #217A3C;

  /* ── Surfaces and ink ─────────────────────────────────────────────
     --navy2, --bg, --muted and --line are the approved mockup's values,
     adopted 24 September 2026. They had drifted: site.css, admin.css
     and the mockup each held a different set, invisibly, because no two
     of them are ever rendered together. The dashboard keeps its own on
     purpose, which is a standing rule. */
  --bg: #F7F3EC;
  --card: #FFFFFF;
  --ink: #13212E;
  /* #5C6873. The mockup originally had #5E6A75, which is 4.40:1 on the
     warm Deals band and under the bar for body text; the contrast sweep
     caught it the moment the palette moved. This clears every light
     surface the site has: 4.53:1 on the warm band, 5.1:1 on the page,
     5.7:1 on a card. The mockup was corrected to match rather than the
     other way round, so the approved design and the site agree. */
  --muted: #5C6873;
  --line: rgba(19, 33, 46, .10);

  /* The alternating section bands. Hand written per band until now,
     each with its own dark override. */
  --band-warm: #EFE4D2;
  --band-white: #FFFDF9;

  /* ── Ink and scrims on a dark ground ────────────────────────────────
     White was used at thirteen different alpha values across thirty
     declarations. These are the four steps those collapse to, named for
     what they are rather than for how transparent they are. */
  --on-dark: #FFFFFF;
  --on-dark-strong: rgba(255, 255, 255, .85);
  --on-dark-muted: rgba(255, 255, 255, .75);
  --on-dark-faint: rgba(255, 255, 255, .6);
  --on-dark-line: rgba(255, 255, 255, .14);
  --on-dark-wash: rgba(255, 255, 255, .08);

  /* ── Type ───────────────────────────────────────────────────────────
     All three self hosted from /static; fonts.css holds the faces. The
     site never loads them from Google and must not start. */
  --display: "Anton", "Impact", "Arial Narrow Bold", sans-serif;
  --body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --script: "Kaushan Script", "Brush Script MT", cursive;

  /* Seven steps, from 82 declarations at 37 distinct values. The
     display sizes stay as clamps because they have to shrink with the
     screen, and each is named for the thing it sets. */
  --text-xs: .72rem;
  --text-sm: .82rem;
  --text-base: .95rem;
  --text-md: 1.05rem;
  --text-lg: 1.2rem;
  --text-xl: 1.6rem;
  --text-2xl: 1.9rem;

  /* ── Weight ─────────────────────────────────────────────────────── */
  --weight-normal: 400;
  --weight-medium: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* ── Shape ──────────────────────────────────────────────────────────
     Four shapes, from thirteen values. 999px and 99px were both in use
     and mean the same thing; 12px and 14px were both "a card". */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Three steps, from eleven bespoke shadows, two of which were the
     same shadow written twice. */
  --shadow-sm: 0 2px 8px rgba(19, 33, 46, .05);
  --shadow-md: 0 4px 14px rgba(19, 33, 46, .10);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, .25);

  /* ── Space ──────────────────────────────────────────────────────────
     A scale for the gaps and paddings that are choices. Optical
     adjustments stay in the rule that needs them; a token called
     --space-3 used to nudge one badge helps nobody. */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* The page gutter and the content width, which the header, every
     section and the banner photograph all measure from. */
  --wrap: 1180px;
  --gutter: 1.25rem;
}

/* ── Dark ────────────────────────────────────────────────────────────
   Every token, not the five that used to be here. The brand colours are
   deliberately unchanged: navy is navy in both, which is the point of a
   brand colour, and it is written out rather than omitted so that the
   next reader can see it was a decision.

   Guarded in both directions: the media query for the system setting,
   and the attribute for an explicit choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy: #13202C;
    --navy2: #1C2C3B;
    --mustard: #F2B632;
    --red: #C8202A;
    --green: #2E9E4F;
    --green-ink: #4FBF72;

    /* Unchanged, and written out rather than omitted so it reads as a
       decision. These sit on the navy sections, and navy is navy in
       both themes: white on navy does not become something else
       because the reader's system is dark. */
    --on-dark: #FFFFFF;
    --on-dark-strong: rgba(255, 255, 255, .85);
    --on-dark-muted: rgba(255, 255, 255, .75);
    --on-dark-faint: rgba(255, 255, 255, .6);
    --on-dark-line: rgba(255, 255, 255, .14);
    --on-dark-wash: rgba(255, 255, 255, .08);

    --bg: #101A24;
    --card: #1A2734;
    --ink: #F2ECE2;
    --muted: #A9B3BC;
    --line: rgba(242, 236, 226, .12);

    --band-warm: #14202B;
    --band-white: #131E29;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .4);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, .55);
  }
}

:root[data-theme="dark"] {
  --navy: #13202C;
  --navy2: #1C2C3B;
  --mustard: #F2B632;
  --red: #C8202A;
  --green: #2E9E4F;
  --green-ink: #4FBF72;

  /* Unchanged, and written out rather than omitted so it reads as a
     decision. These sit on the navy sections, and navy is navy in
     both themes: white on navy does not become something else
     because the reader's system is dark. */
  --on-dark: #FFFFFF;
  --on-dark-strong: rgba(255, 255, 255, .85);
  --on-dark-muted: rgba(255, 255, 255, .75);
  --on-dark-faint: rgba(255, 255, 255, .6);
  --on-dark-line: rgba(255, 255, 255, .14);
  --on-dark-wash: rgba(255, 255, 255, .08);

  --bg: #101A24;
  --card: #1A2734;
  --ink: #F2ECE2;
  --muted: #A9B3BC;
  --line: rgba(242, 236, 226, .12);

  --band-warm: #14202B;
  --band-white: #131E29;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .4);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, .55);
}