/* ==========================================================================
   tokens.css — Franklin's Lawn Care (Macon, GA). Compiled from the approved
   brief (runs/franklins-lawn-care-macon-ga/brief.md — bold-industrial /
   brick-clay-red-chalk-ivory-light / asymmetric-collage). Every value below
   cites a brief section; nothing here is a model default (house-tech-spec §3).
   ========================================================================== */

:root {

  /* --- Colour (brief §4.2) -------------------------------------------------
     Derivation order (design-rules §6, brief §4.1): step 1 (real-world
     colours) is empty (dossier §4.5: no truck/uniform/signage colour found).
     Step 2 (local character) gives brick-clay-red from red Piedmont clay.
     Step 3 (family norms / semantic anchor) keeps the anchor (green/growth)
     off the dominant hue and in the hero's imagery instead (§4.5, §6). */

  --scheme: light;

  --color-bg:            #F5F1E8;  /* chalk-ivory — page ground */
  --color-surface:       #EAE3D3;  /* raised panels: FAQ items, season cards, form fields */
  --color-ink:           #201A16;  /* body/heading text on bg/surface */
  --color-ink-muted:     #5B5049;  /* secondary text on bg/surface */
  --color-accent:        #A9432B;  /* brick-clay-red — the one colour that means "act" */
  /* --color-accent-ink is a house-required role (house-tech-spec §3) with a
     FIXED consumer: base.css's .skip-link reads it as "text that sits ON the
     accent fill." It is #FFFFFF here for exactly that reason (brief §4.3 row
     5, 5.96:1) — the brief's OWN separate row 7 use ("accent AS text on the
     page bg," 5.28:1) is a different role and gets its own token,
     --color-accent-text, below, so the two are never conflated. */
  --color-accent-ink:    #FFFFFF;
  --color-accent-text:   #A9432B;  /* accent colour AS text on bg — brief §4.3 row 7, 5.28:1 */
  --color-accent-hover:  #8C3722;  /* darkened accent fill for hover/focus — R3, monotonically higher contrast */
  --color-border:        #DCD3C0;  /* decorative hairlines only — no contrast floor */
  --color-border-strong: #5B5049;  /* control boundaries, WCAG 1.4.11, >=3:1 vs bg AND surface */
  --color-focus:         #201A16;  /* :focus-visible ring — AA vs bg AND surface */
  --color-selection-bg:  #A9432B;
  --color-selection-ink: #FFFFFF;

  /* Hero atmosphere — NAMED so contrast is computed against the ground's
     actual extremes, never a flat token (brief §4.4, design-rules §6). */
  --hero-dark:    #1B1512;  /* darkest stop */
  --hero-dark-2:  #3B2018;  /* lightest stop */
  --color-tag-eyebrow: #E3A98E;  /* eyebrow/kicker text on the hero's dark ground */
  --color-tag-accent:  #E9714A;  /* H1 emphasis-word colour on the hero's dark ground */

  /* Dark trust-strip / services panel — a second, deliberately darker surface
     used ONLY for the Services section (brief §5.3 step 3), never the page
     ground. */
  --color-panel-dark:      #201A16;  /* == --color-ink, reused as a fill */
  --color-panel-dark-card: #241D18;  /* individual service-row fill inside the dark panel */
  --color-tag-muted:       #A79C90;  /* small labels on --color-panel-dark-card — R4, corrected from the tile's uncomputed value */

  /* Dark-band-safe focus ring (house-tech-spec §3 default pattern) — a light
     tint of the accent, validated >=3:1 against the darkest hero stop and
     against --color-panel-dark/-card, scoped to those bands only. */
  --color-focus-on-band: #E3A98E;

  /* Reference-only, not a UI token: the turf/clay hero image's palette-echo
     target (brief §6 style recipe, §4.5). Used nowhere as a paint value —
     kept here so the derivation is checkable against the shipped asset. */
  --ref-turf-mid: #4F7A4F;

  /* --- Typography (brief §2) -------------------------------------------------
     Two families, four static woff2 instances, self-hosted, SIL OFL 1.1
     (assets/fonts/OFL-Oswald.txt, assets/fonts/OFL-Barlow.txt). R2: no
     font-variation-settings anywhere — every instance is static; weight is
     set with font-weight only. */

  --font-display: 'Oswald', 'Oswald Fallback', 'Arial Narrow', sans-serif;
  --font-body:    'Barlow', 'Barlow Fallback', Arial, 'Helvetica Neue', sans-serif;

  --font-weight-display:        700;  /* H1, every section h2 */
  --font-weight-display-strong: 600;  /* eyebrow, buttons, tag labels — a DISTINCT weight from H1 */
  --font-weight-body:           400;
  /* Barlow ships only 400/400-italic (brief §2.2) — no bold instance exists to
     assign here. base.css's `strong, b` rule reads this token; site.css
     overrides `strong, b` to use the display face instead (brief §2.6's own
     "footer meta labels" role), so this value is never actually painted —
     kept only so base.css never resolves an undefined custom property. */
  --font-weight-body-strong:    700;

  /* --- Fluid scale (brief §2.7), computed at 320/375/768/1440 ------------- */
  --text-h1:      clamp(2.25rem, 1.65rem + 3vw, 3.75rem);
  --text-h2:      clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --text-lead:    clamp(1rem, 0.94rem + 0.4vw, 1.15rem);
  --text-body:    clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
  --text-eyebrow: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
  --text-small:   clamp(0.78rem, 0.76rem + 0.1vw, 0.86rem);
  --text-button:  clamp(0.85rem, 0.82rem + 0.15vw, 0.95rem);

  --leading-tight: 1.05;   /* H1 only, uppercase */
  --leading-snug:  1.25;   /* h2 */
  --leading-body:  1.6;    /* prose, lead, FAQ answers */
  --leading-caps:  1.4;    /* every caps label — eyebrow, buttons, tag labels */

  --tracking-caps:  0.06em;  /* eyebrow, buttons, tag labels */
  --tracking-tight: 0.01em; /* H1 only */

  /* --- Space (brief §3) ------------------------------------------------------ */
  --space-3xs: 4px;  --space-2xs: 8px;  --space-xs: 12px; --space-sm: 16px;
  --space-md: 24px;  --space-lg: 40px;  --space-xl: 64px; --space-2xl: 96px;
  --space-3xl: 144px;

  /* design-rules §7.1's ONE inter-section token. Two call sites only: .section's
     padding-block, and the hero's padding-block-end. 64px below 768, 96px at
     >=768 (brief §3, §5.2). */
  --section-gap: var(--space-xl);

  /* --- Layout (brief §3) ------------------------------------------------------ */
  --layout-container: 72rem;      /* 1152px */
  --layout-measure:   62ch;
  --layout-gutter:    16px;       /* 40px at >=768 — see media override below */
  --layout-tap-min:   44px;
  --header-height:    56px;       /* brief §5.3 step 1: fixed height <=56px + 1px border at every breakpoint */

  /* --- Radius / shadow / border (brief §3) -----------------------------------
     No radius, no shadow, anywhere on this site — bold-industrial ships flat
     corners, no exceptions (design-rules §4: neither varied nor uniform, used
     NEITHER). The house head-mark's "corner fold" (brief §5.1) is built with
     clip-path, never border-radius — see .section__mark in site.css. */
  --radius-none: 0;
  --radius-sm:   var(--radius-none); /* base.css's skip-link/focus-ring need a value; this site draws no rounded corners */
  --shadow-none: none;
  --border-hairline: 1px;
  --border-thick:    4px;   /* service-card top border; section-head rule at full width */
  --border-style: solid;

  /* --- Motion (brief §8) -------------------------------------------------------
     House reveal system (base.css) reads these by name; unchanged from the
     skeleton default since the brief does not override them. */
  --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;

  /* The signature move — the three work-order tags settle once on load, then
     hold (brief §7.4, §8; carried unchanged from tiles/tile-b.html lines
     58-67). One-shot: animation-iteration-count defaults to 1, no loop. */
  --duration-settle: 900ms;
  --tag-delay-1: 0ms;
  --tag-delay-2: 150ms;
  --tag-delay-3: 300ms;
  --settle-offset-y: -14px;

  /* --- The hero collage field (brief §5.2, §7.3, §7.4) ----------------------- */
  --field-height: 220px;   /* 320px at >=768 — see media override below */
  --tag-h:        32px;
  --tag-min-w:    76px;    /* 76-84px per brief §7.3; content sizes the rest */

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

/* --------------------------------------------------------------------------
   Responsive token overrides (brief §3, §5.2). Custom properties cannot
   appear inside a media-query CONDITION, so a token whose VALUE changes
   across the brief's own declared breakpoints is re-declared on :root inside
   the query body — the house pattern (see e.g. sites/beus-hydroseed-logan-ut).
   -------------------------------------------------------------------------- */

@media (min-width: 48em) {
  :root {
    --layout-gutter: 40px;
    --field-height: 320px;
  }
}

/* --------------------------------------------------------------------------
   @font-face — Oswald 600/700 and Barlow 400/400-italic, self-hosted,
   SIL OFL 1.1, static instances (brief §2.1-§2.2). R2: no
   font-variation-settings anywhere. Subset to exactly house-tech-spec §8's
   declared safe range, identical across all four files.

   Coverage gap, recorded per house-tech-spec §8: U+2010, U+2011, U+2012 and
   U+2015 are inside the declared range and absent from all four source
   instances (measured against the shipped woff2s via a fontTools cmap read).
   All four faces lack the SAME four codepoints, so no mid-sentence fallback
   split is possible — only a uniform fall-through to the metrics-matched
   fallback for those four, none of which this site's copy uses (the only
   dash punctuation in copy.md's shipped strings is the en dash U+2013, which
   all four faces carry).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Oswald';
  src: url('../assets/fonts/oswald-600-latin.woff2') format('woff2');
  font-weight: 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+2010-2015, U+2018-201A, U+201C-201E,
    U+2026, U+2032-2033;
}

@font-face {
  font-family: 'Oswald';
  src: url('../assets/fonts/oswald-700-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+2010-2015, U+2018-201A, U+201C-201E,
    U+2026, U+2032-2033;
}

@font-face {
  font-family: 'Barlow';
  src: url('../assets/fonts/barlow-400-latin.woff2') format('woff2');
  font-weight: 400;
  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+2010-2015, U+2018-201A, U+201C-201E,
    U+2026, U+2032-2033;
}

@font-face {
  font-family: 'Barlow';
  src: url('../assets/fonts/barlow-400italic-latin.woff2') format('woff2');
  font-weight: 400;
  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+2010-2015, U+2018-201A, U+201C-201E,
    U+2026, U+2032-2033;
}

/* --------------------------------------------------------------------------
   Metrics-matched fallbacks (brief §2.5; house-tech-spec §8). Donors: Arial
   Narrow for Oswald, Arial for Barlow — measured with scripts/font-metrics.mjs
   against Liberation Sans (Narrow) since the real donors are not
   redistributable and absent here. `local()` names both the donor and the
   clone: Windows/macOS resolve the former, Linux the latter — naming only the
   donor measures right on one platform and silently falls to untuned generic
   sans-serif on the rest (traced from a rendered CLS of 0.006 on this build's
   own Linux measurement, house-tech-spec §7.1's Georgia-only trap). Acceptance
   test: Lighthouse CLS 0.000; README.md carries the full derivation table.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Oswald Fallback';
  src: local('Arial Narrow'), local('Liberation Sans Narrow'), local('Arial'), local('Liberation Sans');
  font-weight: 600;
  font-style: normal;
  size-adjust: 102.21%;
  ascent-override: 116.72%;
  descent-override: 28.27%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Oswald Fallback';
  src: local('Arial Narrow'), local('Liberation Sans Narrow'), local('Arial'), local('Liberation Sans');
  font-weight: 700;
  font-style: normal;
  size-adjust: 104.85%;
  ascent-override: 113.78%;
  descent-override: 27.56%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Barlow Fallback';
  src: local('Arial'), local('Liberation Sans');
  font-weight: 400;
  font-style: normal;
  size-adjust: 96.96%;
  ascent-override: 103.14%;
  descent-override: 20.63%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Barlow Fallback';
  src: local('Arial Italic'), local('Liberation Sans Italic'), local('Arial'), local('Liberation Sans');
  font-weight: 400;
  font-style: italic;
  size-adjust: 94.58%;
  ascent-override: 105.73%;
  descent-override: 21.15%;
  line-gap-override: 0%;
}