/* 801 Weekend — tokens, round 3 (approved Nov 8, 2026)
   salt      Bonneville flats at noon: bright, cool white (not cream)      page
   slate     January sky the day before it snows: cool grey-blue ink       text
   alpenglow last light on the Wasatch, deep rose                           the single accent
   copper    Kennecott, the cut in the Oquirrhs                              sponsor line only
   haze      inversion afternoon                                            meta text ≥14px, rules
   Contrast on salt: slate 10.8, alpenglow 5.2, haze 4.9, copper 4.9. Dark: alpenglow-lift 5.2, haze 5.0.
   Numerals: alpenglow, links slate (option B, chosen after the 390px comparison; see brand/DESIGN.md). */
:root {
  color-scheme: light;

  --salt: #F7F7F4;
  --slate: #2F3A47;
  --alpenglow: #B83A4B;
  --alpenglow-lift: #EC979E;
  --copper: #8F6140;
  --haze: #606A75;
  --haze-light: #C9CDD2;

  --bg: var(--salt);
  --ink: var(--slate);
  --muted: var(--haze);
  --rule: var(--haze-light);
  --accent: var(--alpenglow);
  --link: var(--accent);
  --rail-num: var(--ink);
  --rail-day: var(--muted);
  --sponsor: var(--copper);
  --field-bg: #FFFFFF;
  --panel: #EFEFEB;      /* salt darkened ~3%: guide facts panel */
  --button-bg: var(--accent);
  --button-ink: var(--salt);
  --focus: var(--accent);

  /* Overpass: open descendant of Highway Gothic, the alphabet on I-15 and the canyon road signs. */
  --font: 'Overpass', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* scale: 17px base, ~1.2 */
  --t-1: 0.875rem;  /* 14 */
  --t0:  1.0625rem; /* 17 */
  --t1:  1.25rem;   /* 20 */
  --t2:  1.5rem;    /* 24 */
  --t3:  1.8125rem; /* 29 */
  --t4:  2.1875rem; /* 35 */
  --t5:  2.625rem;  /* 42 */
  --t6:  3.5rem;    /* 56 */
  --t7:  4.5rem;    /* 72 */

  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s6: 1.5rem; --s8: 2rem;
  --s12: 3rem; --s16: 4rem; --s24: 6rem;

  --rail-w: 5.5rem;    /* 88px below 60rem: numeral "28" at 56px = 66px, "Wednesday" 69px, + 16px clear + 1px rule.
                          landing.html sets 6.5rem (104px) at ≥60rem where the numeral is 72px (85px wide). */
  --rail-gap: 1.25rem;
  --measure: 34rem;
  --tap: 3rem;         /* 48px */
}
/* Option B (not chosen): numerals carry the accent, links are slate underlined. */
:root[data-variant="b"] { --rail-num: var(--alpenglow); --link: var(--ink); }

/* The landing page always renders light (color-scheme: light in landing.html). Dark values
   exist only behind an explicit data-theme="dark" for future surfaces; the email handles its
   own dark-mode recoloring inline because inboxes force it. */
:root[data-theme="dark"] {
  --bg: var(--slate); --ink: var(--salt); --muted: #A6AFB9; --rule: #44515F;
  --accent: var(--alpenglow-lift); --link: var(--accent); --rail-num: var(--ink);
  --sponsor: #B49B82; --field-bg: #3A4655; --button-bg: var(--accent); --button-ink: var(--slate);
  --focus: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}