/* ==========================================================================
   tokens.css — the design brief, compiled. Dominguez Landscaping Service,
   Tacoma WA: retro-local / harbor-brass / badge-board ("three badges hung on
   a board, over a living-turf horizon"). Every value below is transcribed
   from the approved brief (§2, §3, §5); nothing was chosen at build time.
   THIS FILE IS THE ONLY PLACE RAW VALUES LIVE (house-tech-spec §3).
   ========================================================================== */

:root {

  /* --- Colour (brief §2.1, §2.2) -------------------------------------------
     Step 1 (real-world brand colour) is EMPTY, recorded as such (no
     truck/uniform/signage/logo colour anywhere public, dossier §4.5). Local
     character is drawn from the business's own three displayed badge/
     credential objects (brief §1), not a generic regional read. */

  --scheme: light;

  --color-bg:          #f3ead9;   /* parchment-cream — page ground */
  --color-surface:     #fffbf1;   /* card / section-alt ground */
  --color-ink:         #241c12;   /* body text, headings */
  --color-ink-muted:   #6b5c46;   /* lead / secondary text */
  --color-accent:      #7a4e18;   /* harbor-brass — CTA fill, badge fill, eyebrow, marks */
  --color-accent-ink:  #fffdf7;   /* text/labels on accent fill */

  --color-border:        #e4d6ba;   /* DECORATIVE hairlines only — no contrast floor */
  --color-border-strong: #8f7754;   /* a CONTROL's own boundary, >= 3:1 vs bg AND surface */
  --color-focus:         #7a4e18;   /* = accent; 6.00:1 vs bg, clears the 3:1 non-text minimum */

  --color-selection-bg:   #7a4e18;
  --color-selection-ink:  #fffdf7;

  /* No dark band anywhere on this site (brief §2.2: no text ever sits on the
     photographic ground), so no --color-focus-on-band is declared. */

  /* Reserved, brief §2.1 — NOT used as live text or a flat fill anywhere in
     this build. --color-board/--color-board-ink exist only in case a future
     revision sets copy directly over the board/turf photograph, and would
     need the §6 gradient-measurement rule re-run before use. */
  --color-board:      #241c12;   /* = ink */
  --color-board-ink:  #f3ead9;   /* = bg */

  /* Reserved, decorative only — the anchor is delivered as a photographic
     turf image (brief §4), never as a CSS gradient or flat fill. */
  --color-anchor-turf-a: #5c7a40;
  --color-anchor-turf-b: #34491f;


  /* --- Typography (brief §2.3) ---------------------------------------------
     Metrics-matched fallback faces are a Builder execution requirement
     (house-tech-spec §7/§8), inserted into the stack immediately after the
     real face and named 'Sancreek Fallback' / 'Karla Fallback' — see the
     @font-face blocks at the bottom of this file for the measured overrides. */

  --font-display: 'Sancreek', 'Sancreek Fallback', 'Rockwell', Georgia, serif;
  --font-body:    'Karla', 'Karla Fallback', 'Segoe UI', system-ui, sans-serif;

  --font-weight-display:    400;   /* Sancreek ships one weight only */
  --font-weight-body:       400;
  --font-weight-body-strong: 700;
  --font-weight-body-semi:  600;   /* eyebrow + board-list tag numerals only */

  /* --- Fluid type scale (brief §2.4) — floor/ceiling bind exactly at the
     stated breakpoints; @375/@768/@1440 resolved values are in the brief. */

  --text-hero: clamp(2.3rem, 8.2vw, 4.2rem);
  --text-h2:   clamp(1.7rem, 4.6vw, 2.6rem);
  --text-h3:   clamp(1.2rem, 3vw, 1.55rem);
  --text-lead: clamp(1.0625rem, 2.1vw, 1.3rem);
  --text-body: clamp(1rem, 1.4vw, 1.0625rem);
  --text-small: 0.9375rem;
  --text-eyebrow: 0.8125rem;

  /* Header wordmark — execution-level: the header must fit one line and
     never wrap to a second row down to 320px (brief §3.1 item 2), which the
     bare --text-h3 scale is too large for once the phone control, primary
     CTA and nav toggle share the same row. Sized and verified against the
     real render, not against --text-h3, on the same precedent as the
     previous landscaping brief's own --text-wordmark token. */
  --text-wordmark: 0.9375rem;

  --leading-tight:   1.05;   /* h1/h2/h3 — brief §3.3's own H1 computation */
  --leading-snug:    1.25;   /* buttons */
  --leading-body:    1.6;    /* plain <p> default — brief §3.6's own body computation */
  --leading-eyebrow: 1.3;    /* brief §3.3's own eyebrow-row computation */
  --leading-lead:    1.4;    /* brief §3.3's own lead-row computation */

  --tracking-tight:  -0.02em;   /* headings */
  --tracking-normal: 0em;
  --tracking-wide:   0.08em;    /* eyebrows — text-transform: uppercase (spec §8) */


  /* --- Space — the house scale, unchanged (brief §2.5) --------------------- */

  --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;

  /* The ONE inter-section rhythm token (brief §3.4) — 64px, fixed at every
     breakpoint, the sole call site for .section's padding-block and the
     hero's padding-block-end. */
  --section-gap: var(--space-xl);

  /* Hero-specific spacing the brief's own §3.3 arithmetic assumes but does
     not name as a token — compiled here rather than left as a magic number
     in site.css. */
  --hero-pad-top: 1.4rem;   /* 22.4px — brief §3.3's own hero top-padding row */


  /* --- Layout — house scale, unchanged ------------------------------------- */

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

  /* The living-hero field's own geometry (brief §3.3: "the living-hero field
     (208px tall)" at the 375px design target; scaled gently toward desktop
     since the brief gives only the one figure). */
  --hero-field-height: clamp(13rem, 10.5rem + 10.5vw, 20rem);

  /* Badge medallion + board-list/proof-board tag sizing — execution detail,
     not a brief-stated number. Circular either way (--radius-pill). */
  --badge-size: clamp(3.5rem, 3rem + 4vw, 5rem);
  --tag-size: 2.25rem;
  --icon-size: 1.125rem;          /* header phone icon, proof-board star icon */
  --badge-nail-offset: -0.5rem;   /* the small hook mark above each medallion */
  --badge-nail-length: 0.6rem;
  --process-list-indent: 1.25em;         /* native <ol> marker gutter, <768px */
  --process-list-indent-wide: 1.5em;     /* native <ol> marker gutter, >=768px */

  /* The hero lead's own narrower column (brief §3.3: "wraps to <= 3 lines
     inside its own max-width: 30ch column"), distinct from the house
     --layout-measure (62ch), which is far wider than the fold arithmetic
     assumes. */
  --hero-lead-measure: 30ch;


  /* --- Radius / shadow / border (brief §2.5) -------------------------------
     "no other radius role used — the badge-board register keeps corners
     either sharp or fully round on the medallions, never a generic
     mid-radius card." --radius-sm/--radius-md are the two live roles;
     --radius-lg/--radius-pill/shadows stay house defaults with the medallion
     as --radius-pill's one call site. */

  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgb(36 28 18 / 0.06);
  --shadow-md: 0 6px 24px rgb(36 28 18 / 0.09);
  --shadow-lg: 0 24px 60px rgb(36 28 18 / 0.14);

  --border-hairline: 1px;
  --border-thick: 3px;
  --border-style: solid;
  --border-style-dashed: dashed;   /* brief §2.1: border-strong's "dashed rule stroke" role */


  /* --- Motion (brief §2.5, §5) ---------------------------------------------
     House durations/eases, used as specified. Reveal geometry and the
     signature swing/glint loops are the brief's own figures. */

  --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: 0.75rem;   /* 12px — brief §5's fade+rise geometry */
  --reveal-stagger: 60ms;    /* brief §5: "stagger 60ms apart" */

  /* The signature move (brief §5): three independent, non-synchronised
     loops. No duration here is a common multiple of another. */
  --duration-swing-1: 5.8s;   /* badges 1 and 3, offset from each other below */
  --duration-swing-2: 7.3s;   /* badge 2 */
  --duration-glint:   8.6s;   /* the light-glint sweep across the board */
  --swing-offset-3:   -2.4s;  /* badge 3's offset from badge 1, brief §5 */


  /* --- Z layers -------------------------------------------------------------- */
  --z-base: 0;
  --z-hero-field: 0;
  --z-hero-glint: 1;
  --z-hero-badges: 2;
  --z-hero-content: 3;
  --z-header: 100;
  --z-nav-panel: 200;
  --z-skip-link: 300;
}

/* --------------------------------------------------------------------------
   @font-face — self-hosted woff2, subset to house-tech-spec §8's declared
   safe range, declared identically on both faces. One static Sancreek
   weight, one variable Karla file spanning 400-700 (design-rules §5, brief
   §2.3).

   COVERAGE-GAP FINDING (house-tech-spec §8's "found on first use" clause,
   confirmed again here per-site with fontTools against the shipped woff2s):
   U+2010, U+2011, U+2012, U+2015 and, on this pair, U+2032/U+2033 as well are
   absent from BOTH faces alike — consistent across every face on this site,
   not a mid-sentence split, so the range is not narrowed for it. Nothing in
   this site's copy renders any of the six. -------------------------------- */

@font-face {
  font-family: 'Sancreek';
  src: url('../assets/fonts/Sancreek-Regular.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: 'Karla';
  src: url('../assets/fonts/Karla-Variable.woff2') format('woff2');
  font-weight: 200 800;
  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;
}

/* Metrics-matched fallbacks (house-tech-spec §7/§8) — local() only, zero
   download bytes, declared BEFORE the real face and named in the token
   stack ahead of the next system name. MEASURED
   (scripts/font-metrics.mjs, fontTools) against the real shipped faces:

     Sancreek vs Gelasio (Georgia's own open metric-compatible clone —
       Georgia is not installable on this Linux build host, so Gelasio is
       the measurement donor; the shipped src still names the brief's own
       'Rockwell'/'Georgia' local() targets, which is what a real visitor's
       browser resolves).
     Karla vs Liberation Sans (Arial/Helvetica's own metric-compatible open
       clone — the same donor used for Karla on the prior landscaping brief,
       reproducing the identical 103.53/88.57/24.34/0 figures, since it is
       the same webfont measured the same way).

   Verified via `node scripts/qa/lighthouse.mjs`: CLS 0.000. */

@font-face {
  font-family: 'Sancreek Fallback';
  src: local('Rockwell'), local('Georgia');
  font-weight: 400;
  font-style: normal;
  size-adjust: 106.49%;
  ascent-override: 96.47%;
  descent-override: 33.84%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Karla Fallback';
  src: local('Segoe UI'), local('Arial');
  font-weight: 200 800;
  font-style: normal;
  size-adjust: 103.53%;
  ascent-override: 88.57%;
  descent-override: 24.34%;
  line-gap-override: 0%;
}