/* ==========================================================================
   tokens.css — the design brief, compiled.

   calwater-drilling-company-turlock-ca — editorial-modern (Tile C,
   C2-DECISION.md 91/100), archetype editorial-stack, "From Permit to Water".
   Every value below is copied from brief.md §2–§7. Values the brief text
   does not state as a number (radius, border-width, shadow) follow the
   winning tile's own treatment (tiles/tile-c.html), the same precedent
   whatcom-gutter-co-lynden-wa's tokens.css records for band-rhythm.
   ========================================================================== */

:root {

  /* --- Colour --------------------------------------------------------------
     Brief §2. Derivation: dossier brand_color OMITTED (no departure argument
     owed, dossier-schema §3.2) → local character (Turlock/San Joaquin Valley,
     playbooks/well-drilling-pumps.md §6.1) → the trade's own material
     register (stamp-red, a permit-approval-stamp ink) → family norms. The
     brief's contrast table (§2) recomputes every pairing from WCAG relative
     luminance; F1–F7, G1–G3 and N1–N5 below are that table's row ids. */

  --scheme: light;

  --color-bg: #f3efe4;                /* valley-parchment */
  --color-surface: #e3dcc8;           /* raised/ruled-section ground */
  --color-ink: #23262b;               /* casing-graphite — neutral, never the accent hue */
  --color-ink-muted: #565c63;         /* F3 5.88:1 on bg, F4 4.93:1 on surface */
  --color-accent: #9c3b2e;            /* stamp-red — permit/approval-stamp ink */
  --color-accent-ink: #ffffff;        /* F7 6.82:1 on accent */

  --color-border: #b7ae95;            /* decorative hairline only — process-index
                                          and trust-strip row rules (N3) — no
                                          contrast floor */
  /* A CONTROL'S OWN BOUNDARY (WCAG 1.4.11, >=3:1 both grounds). The brief
     names no dedicated token for this, so it reuses --color-ink-muted exactly
     as F3/F4 already measure it (5.88:1 on bg, 4.93:1 on surface) — both clear
     3:1 with room to spare, the same reuse whatcom-gutter-co-lynden-wa's
     tokens.css records for the identical need. */
  --color-border-strong: #565c63;

  --color-focus: #9c3b2e;             /* reuses accent — N2: 5.94:1 bg / 4.98:1 surface */

  /* No dark band on this site — the hero sits on the light 3-stop gradient
     (--color-halo-*), never a dark full-bleed ground, so no band-scoped focus
     ring is needed (base.css's comment on --color-focus-on-band). */
  /* --color-focus-on-band: …; */

  --color-selection-bg: #9c3b2e;
  --color-selection-ink: #ffffff;

  /* Hero atmosphere — brief §2, the 3-stop gradient (design-rules §0: never a
     flat hero ground). No text sits on the mid/light stops directly; every
     hero text block is measured against the darkest declared stop per §6's
     gradient amendment (G1–G3). */
  --color-halo-light: #efe9d9;
  --color-halo-mid: #e7dfc9;
  --color-halo-deep: #dcd2b5;

  /* The one cool accent — water shown once, as the outcome (playbook §6.1).
     Decorative graphic only (N5), never text. */
  --color-flow: #3d5a6c;


  /* --- Typography ------------------------------------------------------------
     Brief §3. Display: Source Serif 4, static instances, roman + italic,
     weight 700 only. Body: Work Sans, variable, wght 400–600. Both self-
     hosted, SIL OFL 1.1, subset to house-tech-spec §8's declared safe range.
     Fallback families are metrics-matched (font-face block below, measured
     with scripts/font-metrics.mjs — never guessed) and named ahead of the
     generic fallback in every stack. */

  --font-display: 'Source Serif 4', 'Source Serif 4 Fallback', Georgia, 'Iowan Old Style', serif;
  --font-display-italic: 'Source Serif 4 Italic', 'Source Serif 4 Italic Fallback', Georgia, 'Iowan Old Style', serif;
  --font-body: 'Work Sans', 'Work Sans Fallback', -apple-system, system-ui, sans-serif;

  --font-weight-body: 400;
  --font-weight-body-medium: 500;
  --font-weight-body-strong: 600;
  --font-weight-display: 700;
  --font-weight-display-italic: 700;  /* same weight, italic style — brief §3 */

  /* --- Type scale ----------------------------------------------------------
     Brief §3.2's fluid scale, computed at floor (375px) and ceiling (1440px)
     exactly as the brief's own table states — the clamp() middle term is the
     brief's derived slope, not approximated. */

  --text-hero: clamp(2rem, 1.3rem + 3.6vw, 3.2rem);      /* 34.3px @375 -> 51.2px @1440 — H1 */
  --text-h2: clamp(1.3rem, 1.1rem + 1.2vw, 1.7rem);       /* 22.1px -> 27.2px — section headings */
  --text-h3: clamp(1rem, 0.92rem + 0.5vw, 1.15rem);       /* 16.6px -> 18.4px — process/step heading */
  --text-body: clamp(1rem, 0.95rem + 0.2vw, 1.05rem);     /* 16px -> 16.8px — running copy */
  --text-small: clamp(0.76rem, 0.72rem + 0.15vw, 0.83rem); /* 12.16px -> 13.28px — small/caption */

  /* Fixed sizes named in the brief's own contrast/arithmetic tables (§2 G2/G3,
     §5.0) — not part of the fluid scale, stated as exact numbers because the
     AA verdicts and the fold arithmetic were computed against these exact
     pixel values. */
  --text-eyebrow: 0.68rem;    /* 10.88px — G2's "11px uppercase eyebrow", matches tile-c.html */
  --text-lede: 0.85rem;       /* 13.6px — G3's cited lede size, ships in --color-ink per the G3 fix */

  /* Brief §3.2 — the process-step numerals (01–06), fixed across every
     viewport, not fluid. F6's large-text floor is measured against this exact
     size at 700-weight (20.8px >= 18.66px). */
  --text-step-numeral: 1.3rem;   /* 20.8px */

  --leading-tight: 1.06;      /* H1, per §5.0's arithmetic (2 lines @ 34.3px = 84px block) */
  --leading-snug: 1.25;       /* H2/H3/step names */
  --leading-body: 1.6;        /* body copy */
  --leading-lede: 1.5;        /* hero lede, per §5.0's arithmetic */

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.12em;    /* eyebrow only, authored lower-case, uppercased via text-transform, matches tile-c.html */

  /* --- Space -------------------------------------------------------------
     House scale, unchanged — brief §4 introduces no new step. */

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* Brief §4: --section-gap = --space-xl = 4rem/64px, fixed (not fluid) at
     375 and 1440 alike — the page's one largest inter-section gap. */
  --section-gap: var(--space-xl);

  /* --- Layout ------------------------------------------------------------
     House defaults, unchanged — brief §5.0's first-screen arithmetic and the
     desktop two-column hero (>=64em, container 72rem/1152px) are computed
     against these exact values. */

  --layout-container: 72rem;
  --layout-measure: 62ch;
  --layout-gutter: clamp(1.25rem, 5vw, 3rem);
  --layout-tap-min: 44px;

  /* Brief §3.2/§4 — the one repeated ornament: the process-index and
     trust-strip's shared numeral/kicker column, fixed at its own two-
     character minimum ("01"–"06"), off the --space-* scale per §7.1's
     allowance for a genuine layout-column width. */
  --layout-numeral-col: 3.2rem;

  /* Hero-only reading measures (tiles/tile-c.html's own hero: h1 max-width
     15ch, lede max-width 36ch) — narrower than --layout-measure's 62ch body
     rule on purpose, so the H1 keeps its brief §5.0 two-line budget and the
     lede stays a short intro sentence rather than a running paragraph. */
  --layout-hero-title-measure: 15ch;
  --layout-hero-lede-measure: 36ch;

  /* Brief §5.0's own first-screen arithmetic states these three as exact
     numbers the fold math is computed against (hero padding-block-start,
     the mobile hero's min-height, and the process-diagram field's fixed
     mobile height) — tokenised rather than left as bare literals in site.css,
     matching tiles/tile-c.html's own values (1.7rem, 560px, 270px). */
  --space-hero-top: 1.7rem;            /* 27.2px */
  --layout-hero-min-block: 35rem;      /* 560px */
  --layout-hero-field-block: 16.875rem; /* 270px */

  /* --- Radius / shadow / border -----------------------------------------
     Not stated as design-rules-cited numbers in the brief's prose; taken from
     the winning tile's own treatment (tiles/tile-c.html: .btn-primary/
     .btn-secondary border-radius 2px, .process/.specimen border-radius 8px,
     no shadow anywhere — editorial-modern is quiet and ruled, not elevated,
     matching design-rules §4's ban on a drop shadow on every card). */

  --radius-none: 0;
  --radius-sm: 2px;                   /* buttons, nav-toggle, form fields */
  --radius-md: 8px;                   /* process/trust-strip wrapper panels */
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgb(35 38 43 / 0.06);
  --shadow-md: 0 6px 24px rgb(35 38 43 / 0.09);
  --shadow-lg: 0 24px 60px rgb(35 38 43 / 0.14);

  --border-hairline: 1px;
  --border-thick: 3px;
  --border-style: solid;

  /* --- Motion --------------------------------------------------------------
     House reveal trio (brief §7: "the ordinary house reveal system, not a
     second spectacular moment"). */

  --duration-fast: 140ms;
  --duration-base: 320ms;
  --duration-slow: 640ms;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --reveal-shift: 1.25rem;
  --reveal-stagger: 90ms;

  /* Brief §7 — the one signature move: the process line's six nodes pulse in
     sequence, and one flow-line drifts independently. Deliberately outside
     the house --duration-* trio: this is a one-shot/looping signature device,
     not a reveal. Frozen (not merely slowed) under prefers-reduced-motion —
     see the explicit rules in site.css, per the brief's own reduced-motion
     statement (§7). */
  --duration-node-pulse: 5.4s;     /* per-node loop, staggered 0.6s each */
  --duration-flow-drift: 4s;       /* the flow-line, independent of the nodes */
  --duration-node-stagger: 0.6s;   /* the per-node stagger step (brief §7) */
  --motion-flow-shift: -3px;       /* the flow-line's own drift distance, matching tiles/tile-c.html's flowmove keyframe */
  --duration-line-draw: 900ms;      /* on-load draw (brief §7); clears node 1's
                                        first pulse peak at 2.16s */
  --layout-line-draw-origin: 188px 10px; /* the process-line's own x1,y1 —
                                             transform-origin for its scaleY draw */

  /* --- Z layers ------------------------------------------------------------- */
  --z-base: 0;
  --z-header: 100;
  --z-nav-panel: 200;
  --z-skip-link: 300;
}

/* --------------------------------------------------------------------------
   @font-face — self-hosted woff2, latin subset (house declared safe range,
   house-tech-spec §8), font-display: swap. SIL OFL 1.1, both families
   (assets/fonts/OFL-SourceSerif4.txt, OFL-WorkSans.txt).

   Source Serif 4: two static instances, wght 700 only (brief §3). Work Sans:
   one variable instance, wght axis partially instantiated to 400–600
   (fonttools varLib.instancer) — the exact range this brief's type system
   requests, not the family's full 100–900. Delivery-mechanical (§7.1's free
   lever), not a design substitution.

   'Source Serif 4 Italic' is its own family name (brief §3's token stack) —
   a style of the same physical typeface, not a third face (emphasis_font:
   null, §8).

   All three faces subset to an IDENTICAL codepoint set — the declared range
   below, minus U+2010/2011/2012/2015 (absent from Work Sans; Source Serif 4
   lacks only U+2011) — dropped from every face per §8's equalisation rule, so
   no line ever splits across two fallback chains. Measured with fontTools;
   see README.md. */

/* ---- Source Serif 4 fallbacks (measured against Gelasio via
   scripts/font-metrics.mjs) ---- */

@font-face {
  font-family: 'Source Serif 4 Fallback';
  src: local('Georgia');
  font-weight: 700;
  font-style: normal;
  size-adjust: 111.46%;
  ascent-override: 92.95%;
  descent-override: 30.06%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Source Serif 4 Italic Fallback';
  src: local('Georgia Italic'), local('Georgia');
  font-weight: 700;
  font-style: italic;
  size-adjust: 105.55%;
  ascent-override: 98.15%;
  descent-override: 31.74%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Source Serif 4';
  src: url('../assets/fonts/source-serif-4-roman-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7,
    U+00BF, U+00C0-00FF, U+2013-2014, U+2018-201A, U+201C-201E, U+2026,
    U+2032-2033;
}

@font-face {
  font-family: 'Source Serif 4 Italic';
  src: url('../assets/fonts/source-serif-4-italic-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7,
    U+00BF, U+00C0-00FF, U+2013-2014, U+2018-201A, U+201C-201E, U+2026,
    U+2032-2033;
}

/* ---- Work Sans — fallback face (measured against Arimo, Arial's open clone) ---- */

@font-face {
  font-family: 'Work Sans Fallback';
  src: local('Arial');
  font-weight: 400 600;
  font-style: normal;
  size-adjust: 113.41%;
  ascent-override: 82%;
  descent-override: 21.43%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Work Sans';
  src: url('../assets/fonts/work-sans-variable-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7,
    U+00BF, U+00C0-00FF, U+2013-2014, U+2018-201A, U+201C-201E, U+2026,
    U+2032-2033;
}