/* ==========================================================================
   City of Coyote Flats — design tokens
   Phase 2, scope_mode VISUAL_RECON.

   Every value here was MEASURED from the live source via computed styles
   (scripts/extract-tokens.mjs), not chosen. This file documents a system that
   already exists so it can be rebuilt faithfully.

   Where a source value fails WCAG AA it is kept as a token but annotated with
   the pairing that must not be used. Fixing contrast is execution quality,
   which this mode calls for; changing the palette would be a redesign, which
   it does not.
   ========================================================================== */

:root {
  /* --- Colour ------------------------------------------------------------
     The source drives its palette through Duda's --color_1..4 on :root.
     Names below are semantic; the source name is given for traceability. */

  --brand-blue:        #005b96;   /* source --color_1 — headings, links, primary */
  --brand-blue-muted:  #6497b1;   /* source --color_3 — secondary panels */
  --brand-red:         #bf0000;   /* source --color_4 — CTAs, mobile nav drawer */
  --white:             #ffffff;   /* source --color_2 */

  /* Neutrals, measured in use */
  --page-bg:           #eeeeee;   /* document background */
  --surface:           #ffffff;   /* cards, content panels */
  --surface-alt:       #f7f7f7;
  --border-subtle:     #e2e7ec;
  --text:              #333333;
  --text-muted:        #8a8a8a;
  --text-strong:       #000000;

  /* Measured again in Phase 4: every section <h2> on the source is centred and
     set in this red. It is the section-heading colour, not the palette drift
     Phase 2 recorded it as. --brand-red stays the action colour. */
  --heading-red:       #981b28;

  /* --- Typography --------------------------------------------------------
     Poppins throughout. The source also loads Roboto, Montserrat, Lato,
     Bebas Neue and Kumbh Sans fallback metrics but renders none of them. */

  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: var(--font-body);

  --fw-light: 300;   /* body copy on the source */
  --fw-regular: 400;
  --fw-medium: 500;  /* nav */
  --fw-bold: 700;

  /* Measured scale. h1 and h2 are the same size and differ only by weight —
     that is the source's actual scale, not an omission. */
  --fs-display: 60px;  --lh-display: 1.1;   /* homepage hero only */
  --fs-h1:      30px;  --lh-h1:      30px;
  --fs-h2:      30px;  --lh-h2:      1.3;
  --fs-h3:      24px;  --lh-h3:      1.35;
  --fs-h4:      18px;  --lh-h4:      1.4;
  --fs-body:    16px;  --lh-body:    24px;
  --fs-nav:     18px;
  --fs-small:   14px;   /* breadcrumb and footer fine print */
  --ls-nav:     0.54px;

  --measure: 68ch;

  /* --- Layout ------------------------------------------------------------
     1200px is the measured inner content width on every template. 1410px is
     the outer wrapper used by full-bleed rows. */

  --container:      1200px;
  --container-wide: 1410px;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  /* --- Spacing -----------------------------------------------------------
     Section rhythm on the source is irregular: 40/70, 50/70 and 15/100
     top/bottom pairs all appear. Recorded as-is. */

  --space-1: 4px;   --space-2: 8px;   --space-3: 15px;
  --space-4: 24px;  --space-5: 40px;  --space-6: 50px;
  --space-7: 70px;  --space-8: 100px;

  --section-pad-y:     var(--space-5) var(--space-7);
  --section-pad-y-alt: var(--space-6) var(--space-7);

  /* --- Geometry ----------------------------------------------------------
     The source uses five radii: 13px (35x), 15px (7x), 4px (3x), 50% (3x) and
     25px (1x). Consolidated to three. 15px and 25px fold into the dominant
     13px — a 2px difference nobody perceives, against a token-discipline gate
     that allows three. Normalising tokens is permitted code-quality work in
     this mode; it changes no layout. */
  --radius:       13px;
  --radius-sm:    4px;
  --radius-round: 50%;
  --border-hairline: 1px;

  /* --- Depth -------------------------------------------------------------
     The source uses exactly one elevation. Not a scale — a single shadow. */
  --shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.25);

  /* Scrims. The source sets white type directly onto photography with no
     scrim, which leaves 7 text/background pairs impossible to contrast-check.
     These make the guarantee mechanical rather than assumed. */
  --scrim:        rgba(0, 0, 0, 0.42);
  --scrim-strong: rgba(0, 0, 0, 0.62);
  --rule-on-blue: rgba(255, 255, 255, 0.28);

  /* --- Motion ------------------------------------------------------------ */
  --dur-fast:   0.2s;   /* dominant — 13 occurrences */
  --dur-mid:    0.3s;
  --dur-slow:   1s;
  --ease:       ease;
  --ease-out:   ease-out;
  --ease-inout: ease-in-out;

  /* --- Breakpoints (documented; media queries cannot read custom properties)
     mobile   <= 767px
     tablet   768px – 1024px
     desktop  >= 1025px
     The source also branches at 1200px and 1399px. */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0.01ms; --dur-mid: 0.01ms; --dur-slow: 0.01ms; }
}

/* ==========================================================================
   CONTRAST — measured on rendered text, not assumed.
   Full audit: evidence/source-metadata/contrast-audit.json

   PASS
     #005b96 on #ffffff  7.15:1
     #bf0000 on #ffffff  6.53:1
     #ffffff on #bf0000  6.53:1
     #005b96 on #e8e8e8  5.84:1

   FAIL — do not reproduce these pairings
     #ffffff on #6497b1  3.18:1 at 18px/700 (needs 4.5:1)
         → use --brand-blue for text on light, or --text on --brand-blue-muted
     #999999 on #f5f5f5  2.61:1
         → Duda share-widget chrome; not carried forward

   7 further pairs place text over background photography and are not
   machine-checkable. Phase 4 must ship a scrim or text shadow and re-verify
   at runtime rather than assume.
   ========================================================================== */