/* ============================================================
   00 — Design tokens: readable variants of the two quiet colors.
   Fix lane fix-6, September 2026. Findings T9-001, T9-002,
   T7-006, T7-007.

   phase1.css defines the palette and teams never edit it, so the
   corrections live here. This file sorts first inside
   assets/css/overhaul, which is enqueued after phase1.css, so a
   :root block here wins on cascade order at equal specificity and
   every later overhaul file that reads a token gets the new value.

   WHAT WAS WRONG

   Two tokens were being used as small text on the cream grounds
   at ratios no one with ordinary eyesight in ordinary light can
   read:

     --tx-3  #77877D  (aliased --sage) ... 3.13:1 on #EFE9DD
     --clay  #B08D62                   ... 2.54:1 on #EFE9DD

   WCAG AA asks 4.5:1 for text under 18.66px bold / 24px regular,
   and 3:1 for larger text and for borders that carry meaning.
   HANDOVER-DESIGN.md is explicit that sage is "quiet text on DARK
   grounds"; on cream it always needed a darker value.

   WHAT CHANGED, AND WHAT DELIBERATELY DID NOT

   --tx-3 is a text token (tx = text). Every one of its ~40 uses in
   this theme is a `color:` except one chip hairline, so it is
   darkened at the root and the whole site follows.

   --clay is NOT only a text token. It is also the underline under
   the house link, card hairlines, the focus outline and the event
   card's top rule, and on the ink and river bands it is a light
   accent that must stay light. So --clay itself is untouched and a
   separate --clay-tx is introduced for the places clay is set as
   `color:` on a light ground: eyebrows, event dates, teacher
   discipline lines, form legends and (required) markers.

   --rust-tx is the same idea for the action color. #B04E28 as text
   measures 4.38-4.42:1 on the cream grounds - under the bar by a
   hair, and the reason "Book this class" and "How booking works"
   failed the sweep. Rust as a BUTTON FILL is untouched, so the one
   rust action per screen looks exactly as designed.

   --sage-4 and --sage are pinned back to the original #77877D
   because they are hairlines and input borders, not text; leaving
   them to follow --tx-3 would have thickened every form field.

   Measured against #F0EADE / #F7F3EA / #EFE9DD:

     --tx-3    #5C6860   4.86 / 5.26 / 4.82
     --clay-tx #7C603E   4.87 / 5.27 / 4.83
     --rust-tx #A24825   5.02 / 5.43 / 4.98

   tests/validate-overhaul-00-tokens.php recomputes those from this
   file and fails if any of them drops below 4.5.
   ============================================================ */

:root {
  /* Quiet text, on cream. Was #77877D (3.13:1). */
  --tx-3: #5C6860;

  /* Hairlines and input borders keep the original sage: they are
     decoration and 1.5px field boundaries, not text. */
  --sage: #77877D;
  --sage-4: #77877D;

  /* Clay and rust, for use as TEXT on a light ground only.
     --clay and --rust themselves are unchanged. */
  --clay-tx: #7C603E;
  --rust-tx: #A24825;

  /* See the @font-face pair below: the plain fallbacks, wearing the web
     fonts' proportions, so the swap does not move the page. */
  --d: "Fraunces", "Fraunces fallback", Georgia, serif;
  --b: "Source Sans 3", "Source Sans 3 fallback", system-ui, sans-serif;
}

/* ============================================================
   METRIC-MATCHED FALLBACK FACES — finding T9-004.

   Mobile CLS on the discipline pages measured 0.148-0.282, all of
   it traced to the hero H1, lede and button moving when the two
   web fonts arrive. The fonts are self-hosted and already declare
   font-display: swap, which is the right choice - the reader gets
   words immediately - but the fallback face has different metrics,
   so the block changes height at the swap and everything under it
   jumps.

   These two faces are the ordinary fallbacks wearing the real
   font's proportions, measured in Chrome against a 70-character
   sample at 100px:

     Fraunces        3599.60 wide, 98.00 up, 26.00 down
     Georgia         3411.72 wide, 92.00 up, 22.00 down   -> 105.5%
     Source Sans 3   3185.30 wide, 102.00 up, 40.00 down
     Arial           3418.65 wide, 91.00 up, 21.00 down   ->  93.2%

   They are inserted between the web font and the plain fallback in
   --d and --b, so the first paint is laid out at very nearly the
   final size and the swap moves almost nothing. The match is exact
   for Georgia and Arial; on a platform that resolves the local()
   list to something else it is an approximation, which is still
   much closer than no adjustment at all.
   ============================================================ */

@font-face {
  font-family: "Fraunces fallback";
  src: local("Georgia"), local("Times New Roman"), local("Times");
  size-adjust: 105.5%;
  ascent-override: 92.9%;
  descent-override: 24.6%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Source Sans 3 fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Roboto"), local("Segoe UI");
  size-adjust: 93.2%;
  ascent-override: 109.5%;
  descent-override: 42.9%;
  line-gap-override: 0%;
}