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

   Source: runs/aaa-lawn-services-dayton-oh/brief.md, approved at C3
   (runs/aaa-lawn-services-dayton-oh/c3-decision.md). Every value below
   traces to a brief section cited in its comment. Nothing here is a model
   default.
   ========================================================================== */

:root {

  /* --- Colour --------------------------------------------------------------
     Brief §2, derivation order: (1) business's real-world colours — departure
     licensed, the dossier's brand_color.hex is a GoHighLevel funnel-builder
     theme default with no real-world asset to echo (photos_count: 0); (2)
     local character — none found, contributes nothing; (3) family norms —
     warm-craft. The §6.1 vertical anchor (green/growth) is carried by
     imagery + accent, not the dominant ground colour (brief §2, playbook
     §6.1a rule 2). One deliberate mode: light. */

  --scheme: light;

  --color-bg: #FBF6EC;                /* kraft-cream — page ground (brief §2.1) */
  --color-surface: #F1E6D2;           /* raised panels, ticket card ground, hero atmosphere far stop (brief §2.1) */
  --color-ink: #2A1F14;               /* body/heading ink (brief §2.1, pair 1, 14.94:1 on bg) */
  --color-ink-muted: #6B5847;         /* secondary copy, ticket field values, footer fine print (pair 2, 6.27:1 on bg) */
  --color-accent: #3E6B3C;            /* route-leaf — carries the §6.1 green/growth anchor (brief §2.1) */
  --color-accent-ink: #FBF6EC;        /* = bg; text sitting ON accent (pair 5, 5.78:1) */

  --color-border: #D8C6A8;            /* decorative hairlines only (brief §2.1) */
  --color-border-strong: #6B5847;     /* = ink-muted; control boundaries, WCAG 1.4.11 (pair 8, ≥3:1 both grounds) */
  --color-focus: #3E6B3C;             /* = accent; :focus-visible ring (pair 9, ≥3:1 both grounds) */
  --color-selection-bg: #3E6B3C;
  --color-selection-ink: #FBF6EC;

  /* No dark band anywhere on this site (brief §2.1) — --color-focus-on-band
     is deliberately not declared. */

  /* Brief-specific colour: the stamp's ring/border ONLY, never a text-role
     colour (brief §2.1/§2.2 — rust on bg would clear AA but the brief
     specifies it never carries text, removing the ambiguity outright). */
  --color-rust: #B5551E;


  /* --- Typography ------------------------------------------------------------
     Brief §3: display Besley 700 (SIL OFL 1.1), body Karla 400/600 (SIL OFL
     1.1). Emphasis role: Besley 500 italic (the accent word inside the hero
     H1, inline emphasis). Both self-hosted, no CDN. */

  --font-display: 'Besley', 'Besley Fallback', 'Besley Fallback 2', Georgia, 'Times New Roman', serif;
  --font-body: 'Karla', 'Karla Fallback', Arial, sans-serif;

  --font-weight-body: 400;
  --font-weight-body-strong: 600;
  --font-weight-display: 700;
  --font-weight-emphasis: 500;        /* brief-specific: the hero H1 accent word + inline emphasis (brief §3.1) */

  /* --- Type scale ----------------------------------------------------------
     Brief §3.2, computed at floor/375/1440/ceiling. --text-body and
     --text-small are deliberately fixed, not fluid (brief §3.2's own
     reasoning: a short, thin-dossier one-pager, --text-hero carries the
     fluidity the sale needs). */

  --text-hero: clamp(2.1rem, 1.5rem + 3vw, 3.4rem);     /* 33.6 / 35.25 / 54.4 / 54.4 px */
  --text-h2: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);       /* 22.4 / 22.95 / 30.4 / 30.4 px */
  --text-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem);   /* 18.4 / 18.675 / 24.0 / 24.0 px */
  --text-lead: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);   /* 16.0 / 16.165 / 18.4 / 18.4 px */
  --text-body: 1rem;                                    /* fixed, 16px (brief §3.2) */
  --text-small: 0.85rem;                                /* fixed, 13.6px (brief §3.2) */
  --text-eyebrow: clamp(0.72rem, 0.68rem + 0.2vw, 0.85rem); /* 11.52 / 11.63 / 13.6 / 13.6 px */

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-body: 1.6;

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;            /* eyebrows / ticket field labels */

  /* --- Space -----------------------------------------------------------------
     House scale, unchanged (design-rules: "the scale is house"). Brief §4.3
     picks --section-gap = --space-xl as the ONE inter-section spacing value;
     every intra-section gap stays at --space-sm/--space-md. */

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

  --section-gap: var(--space-xl);     /* brief §4.3 */

  /* --- Layout ----------------------------------------------------------------- */

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

  /* --- Radius / shadow / border ------------------------------------------
     Brief specifies no uniform-radius mandate; --radius-sm is used for the
     route-stack card frame (bordered box, ref-008's line-list logic) and
     buttons, matching the house default and the warm-craft family's
     "hand-built, honest" register (no heavy rounding). */

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

  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgb(42 31 20 / 0.06);
  --shadow-md: 0 6px 24px rgb(42 31 20 / 0.09);
  --shadow-lg: 0 24px 60px rgb(42 31 20 / 0.14);

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

  /* --- Motion ------------------------------------------------------------
     House reveal tokens, unchanged. base.css collapses these to ~0 under
     prefers-reduced-motion (spec §8). */

  --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 §8 — the one signature move: the route-ticket card and the
     one-job sprig sway on independent, non-synced loops (8.4s / 6.4s, ratio
     21:16, no small-integer common ratio, so the two never visibly
     re-align). Both are collapsed under prefers-reduced-motion in site.css
     (base.css's blanket --duration-* collapse does not reach these, since
     they are brief-specific tokens, not the house duration scale). */
  --loop-ticket: 8.4s;
  --loop-ticket-delay: 0s;
  --loop-sprig: 6.4s;
  --loop-sprig-delay: 1.1s;
  --sway-angle: 1.4deg;               /* execution-level amplitude — "sways gently" (brief §8) */

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


  /* --- Brief-specific: hero field composition (brief §5) ------------------
     Buildability simplification (brief §5): pure-CSS shapes / bordered
     boxes, stated pixel targets, not computed against variable content.
     Values below are the brief's own literals expressed as tokens (spec §3:
     no raw px/hex outside tokens.css); several resolve to existing space
     tokens since the brief's numbers land exactly on the house scale. */

  --hero-field-height: 13.125rem;     /* 210px total field height (brief §4.4/§5) */
  --hero-turf-height: 56%;            /* turf-band = 56% of the field height (brief §5.1) */

  --hero-ticket-width: 11.875rem;     /* 190px (brief §5.2) */
  --hero-ticket-min-width: 9.375rem;  /* 150px floor (brief §5.2 minimum-width behaviour) */
  --hero-ticket-top: var(--space-sm);     /* 16px = 1rem (brief §5.2) */
  --hero-ticket-left: var(--space-md);    /* 24px = 1.5rem (brief §5.2) */

  --hero-stamp-size: 2.125rem;        /* 34px circle (brief §5.3) */
  --hero-stamp-top: var(--space-2xs); /* 8px (brief §5.3) */
  --hero-stamp-right: var(--space-2xs); /* 8px (brief §5.3) */
  --hero-stamp-rotate: -12deg;        /* brief §5.3 */

  --hero-sprig-width: 0.875rem;       /* 14px (brief §5.4) */
  --hero-sprig-height: 1.875rem;      /* 30px (brief §5.4) */
  --hero-sprig-bottom: 4.375rem;      /* 70px (brief §5.4) */
  --hero-sprig-right: 2.125rem;       /* 34px (brief §5.4) */
  --shape-leaf: 0 100% 0 100%;        /* asymmetric "leaf" corner radius — the sprig (brief §5.4) and the roster's leaf dot-marks (brief §4.2) share one shape */
  --hero-stamp-text-size: 0.55rem;    /* the GOOGLE mark's text, small enough to sit inside a 34px circle (brief §5.3) */

  /* --- Brief-specific: route-stack card composition below the hero -------
     Execution-level sizes for the recurring card frame's contents (brief
     §4.1's "further ticket in the stack"), not stated as brief literals but
     kept as tokens per spec §3 all the same. */
  --roster-col-min: 11rem;            /* Who We Serve roster grid column floor */
  --roster-mark-width: 0.5rem;        /* leaf dot-mark, roster items */
  --roster-mark-height: 0.7rem;
  --review-figure-width: 12rem;       /* One Call, Kept: tool photo + two-column grid at >=40em */
  --ticket-echo-width: 14rem;         /* One Call, Kept: route-ticket echo max width */

  --nav-toggle-reserve: 5rem; /* clears the absolutely-positioned toggle below 48em — README "second CLS source" */
}

/* --------------------------------------------------------------------------
   @font-face — self-hosted woff2, latin subset, static instances only.
   Besley: SIL OFL 1.1, The Besley Project Authors. Karla: SIL OFL 1.1, The
   Karla Project Authors. Licence text: assets/fonts/OFL.txt.

   Subset to the house declared range (house-tech-spec §8), identical on all
   four faces. Coverage gap against the actual shipped files (checked with
   fontTools, not assumed): U+2010, U+2011, U+2012, U+2015, U+2032, U+2033
   are declared and absent from all four faces alike — none render in this
   site's copy, and a page falling back for one of them falls back
   consistently across every face, never mid-sentence in two. One further,
   asymmetric gap: Besley also lacks U+2122 (™), which Karla carries. This
   site's copy never renders U+2122 anywhere (checked against copy.md), so
   the asymmetry never manifests as a rendered mid-sentence split — recorded
   here per house-tech-spec §8 rather than silently shipped.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Besley';
  src: url('../assets/fonts/besley-700.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: 'Besley';
  src: url('../assets/fonts/besley-500italic.woff2') format('woff2');
  font-weight: 500;
  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;
}

@font-face {
  font-family: 'Karla';
  src: url('../assets/fonts/karla-400.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-600.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;
}

/* --- Metrics-matched fallbacks (house-tech-spec §7/§8, brief §3.1). Donors:
   Gelasio (Georgia's own metric-compatible open-source stand-in — used as
   the measurement proxy since no Georgia binary was available to read; the
   CSS still names local('Georgia') first, matching a real system font on
   every OS that ships one), Liberation Sans (Arial's metric-compatible
   stand-in, present on this build machine — the CSS still names
   local('Arial') first). size-adjust / ascent-override / descent-override /
   line-gap-override computed by scripts/font-metrics.mjs from the real
   shipped instances' own OS/2 + hhea metrics (the fontaine algorithm —
   English-letter-frequency-weighted xAvgCharWidth ratio drives size-adjust;
   ascent/descent scale with it). One fallback family per real family, with
   one @font-face variant per weight/style pair the real family ships — the
   browser's own font matching selects the correct fallback variant from the
   requested computed style, so no extra token is needed for the bold/italic
   roles. Verified against Lighthouse CLS — see README.md (target 0.000).

   A SECOND fallback tier ('Besley Fallback 2') is required for the serif
   display face, on the precedent of
   sites/3-dogs-and-a-girl-lincoln-ne/css/tokens.css: on a machine with
   neither Georgia nor Gelasio installed (confirmed — this build machine has
   neither), 'Besley Fallback' registers no local face at all and CSS font
   matching falls through the rest of the --font-display stack to the
   browser's generic `serif`, which resolves to DejaVu Serif on this
   platform — an uncalibrated face the first tier's overrides do not match,
   measured at 0.03-0.09 CLS with `scripts/qa/lighthouse.mjs` (budget ≈ 0).
   'Besley Fallback 2' is measured directly against DejaVu Serif, the actual
   resolved face, and closes the gap: 0.000 confirmed. Karla's fallback
   needs no second tier — Liberation Sans is genuinely present on this
   machine, so 'Karla Fallback' already resolves correctly. No italic
   instance of DejaVu Serif exists (fc-list confirmed: Book + Bold only), so
   the italic tier below donates the Book (regular) face — the browser's
   own font-synthesis supplies the oblique, which is the accepted last
   resort this far down the stack. */

@font-face {
  font-family: 'Besley Fallback';
  src: local('Georgia'), local('Gelasio');
  font-weight: 700;
  font-style: normal;
  size-adjust: 106%;
  ascent-override: 117.92%;
  descent-override: 40.09%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Besley Fallback';
  src: local('Georgia Italic'), local('Gelasio Italic');
  font-weight: 500;
  font-style: italic;
  size-adjust: 113.68%;
  ascent-override: 109.96%;
  descent-override: 37.38%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Besley Fallback 2';
  src: local('DejaVu Serif Bold'), local('DejaVu Serif');
  font-weight: 700;
  font-style: normal;
  size-adjust: 95.76%;
  ascent-override: 130.54%;
  descent-override: 44.38%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Besley Fallback 2';
  src: local('DejaVu Serif');
  font-weight: 500;
  font-style: italic;
  size-adjust: 99.45%;
  ascent-override: 125.69%;
  descent-override: 42.74%;
  line-gap-override: 0%;
}

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

@font-face {
  font-family: 'Karla Fallback';
  src: local('Arial Bold'), local('Liberation Sans Bold');
  font-weight: 600;
  font-style: normal;
  size-adjust: 98.88%;
  ascent-override: 92.74%;
  descent-override: 25.49%;
  line-gap-override: 0%;
}