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

   chattanooga-tree-service-chattanooga-tn — brief.md v1 (approved 2026-08-26),
   family `retro-local`, archetype `band-rhythm`, signature "the badge holds".
   Every value below is copied from brief.md §3.3's literal token block,
   §2.6/§2.7's type tokens, §5's layout/ornament tokens and §8's motion
   tokens. Supplements are Builder fills, each a direct restatement of a
   brief-stated exact outcome rather than a new choice, flagged where they sit:
     --header-height (56px, brief §5.6 "Header — 56px + a 1px border-block-end")
     --text-wordmark (16px, brief §5.6 "Wordmark left, --font-display at 16px")
     --control-height (52px, brief §5 hero slot ③ "52px tall")
     --control-min-width (260px, brief §5 hero slot ③ "inline-block, min 260px")
   ========================================================================== */

:root {

  /* --- Colour (brief §3.3). Derivation: brief §3.1 step 1 CONFIRMED EMPTY
     (no brand colour recorded at any tier) → §3.2 local-character step
     (parchment/mustard = sign-painted, weathered-board Tennessee Valley /
     Southern Appalachian roadside register) → §3's family-norms step
     (retro-local's own Americana, badge/sign-painter energy). */

  --scheme: light;

  --color-bg:            #F6EDDD;   /* parchment cream ground */
  --color-surface:       #EBDFC7;   /* alternating band ground */
  --color-ink:           #24344A;   /* denim-navy — STRUCTURAL, not the registry's dominant hue */
  --color-ink-muted:     #55647A;

  --color-accent:        #A87B12;   /* mustard-gold — DOMINANT, large/decorative-scale text only */
  --color-accent-strong: #7A5A0C;   /* body-safe mustard — every body-scale accent word + CTA fill */
  --color-accent-ink:    #F6EDDD;   /* text colour on an accent-strong fill (same value as bg) */

  --color-border:        #55647A;   /* functional UI edges — form fields — reuses ink-muted */
  --color-rule:          #D9C9A3;   /* DECORATIVE hairlines ONLY — 1.41:1, never a functional edge */

  --color-focus:         #7A5A0C;
  --color-selection-bg:  #7A5A0C;
  --color-selection-ink: #F6EDDD;

  --color-atmos-hi:  #FDF9EE;   /* hero atmosphere radial gradient — lightest stop */
  --color-atmos-mid: #F6EDDD;   /* = --color-bg */
  --color-atmos-lo:  #EBDFC7;   /* = --color-surface, darkest stop */

  /* Token-contract completeness: base.css's shared rules and the reserved
     radius/shadow steps resolve to the site's one argued radius/shadow
     (brief §3.3: "one argued value used everywhere"), so nothing is left
     undefined. */
  --radius-none: 0;
  --radius-md:  var(--radius-sm);
  --radius-lg:  var(--radius-sm);
  --radius-pill: var(--radius-sm);
  --shadow-sm:  var(--shadow-none);
  --shadow-md:  var(--shadow-none);
  --shadow-lg:  var(--shadow-none);

  /* --- Typography (brief §2). Two families, four static woff2 instances —
     at design-rules §5's ceiling of four. Abril Fatface: SIL OFL 1.1,
     TypeTogether — watch-listed, justified at brief §2.1. Karla: SIL OFL
     1.1, Jonathan Pinhorn/Huerta Tipográfica — assets/fonts/OFL.txt carries
     both copyright notices. No font-variation-settings anywhere (brief
     §2.3): four static instances, no variable axes. */

  --font-display:      'Abril Fatface', 'Abril Fatface Fallback', Georgia, 'Times New Roman', serif;
  --font-body:          'Karla', 'Karla Fallback', 'Segoe UI', Arial, sans-serif;
  --font-body-strong:   'Karla', 'Karla Bold Fallback', 'Segoe UI', Arial, sans-serif;
  --font-body-italic:   'Karla', 'Karla Italic Fallback', 'Segoe UI', Arial, sans-serif;
  --font-weight-display: 400;  --font-weight-body: 400;  --font-weight-body-strong: 700;

  /* --- Type scale — computed across its full range, brief §2.7 ----------- */

  --text-eyebrow: clamp(0.72rem, 0.6rem + 0.4vw, 0.85rem);
  --text-h1:      clamp(1.9rem, 1.3rem + 2.9vw, 3.4rem);
  --text-h2:      clamp(1.4rem, 1.15rem + 1.2vw, 1.9rem);
  --text-lead:    clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --text-body:    clamp(1rem, 0.94rem + 0.3vw, 1.0625rem);
  --text-small:   clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);

  --leading-tight: 1.08;  --leading-snug: 1.28;  --leading-body: 1.55;  --leading-caps: 1.45;

  --tracking-display: -0.01em;  --tracking-normal: 0em;  --tracking-caps: 0.12em;
  /* base.css's shared h1–h4 rule reads --tracking-tight; every element that
     rule reaches on this site (h1, h2 — no h3/h4 exist) IS display type, so
     this is a direct alias rather than a repurposed role. */
  --tracking-tight: var(--tracking-display);

  /* --- Space — house scale, brief §3.3. --space-3xl is used by the form's
     textarea min-height default in site.css (skeleton pattern), kept at its
     house value since the brief states no override. */

  --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);   /* = 64px FIXED at every declared width — brief §5.5 */
  --layout-container: 72rem;             /* 1152px outer box */
  --layout-gutter:    1rem;              /* 16px <48rem → 2.5rem (40px) ≥48rem, INSIDE the container */
  --layout-measure:   36rem;             /* 576px prose cap */
  --h1-max:           40rem;             /* 640px — the display column, brief §5.1 */
  --layout-tap-min:   44px;
  --hero-field-ratio: 16 / 9;            /* fixed at every width — brief §5.1 rule 5 */

  /* Sticky stack = expiry 44 + header 56 + 1px border = 101px (brief §5.6). */
  --header-height:     3.5rem;    /* 56px, fixed at every width — brief §5.6 */
  --text-wordmark:     1rem;      /* 16px — brief §5.6 "Wordmark left ... at 16px" */
  --control-height:    3.25rem;   /* 52px — brief §5 hero slot ③ "52px tall" */
  --control-min-width: 16.25rem;  /* 260px — brief §5.1 point 3, inline-block floor at ≥48rem */

  --mark-size: 28px;                     /* the band-head corner mark → 36px at ≥48rem */
  --radius-sm: 2px;                      /* the ONE radius on this site — a signboard's cut corner */
  --shadow-none: none;                   /* the ONE shadow token — no drop shadow anywhere */
  --border-hairline: 1px;  --border-frame: 2px;  --border-style: solid;
  --border-thick: var(--border-frame);   /* house focus-ring weight */

  --duration-fast: 160ms;  --duration-base: 300ms;  --duration-slow: 520ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-shift: 0.75rem;  --reveal-stagger: 70ms;

  /* Ambient signature motion, hero field only (brief §8.2): three
     independent, non-synchronised loops. 9s / 6.5s / 7.9s (offset -2.1s)
     share no small common period (18:13:15.8 in half-second units). */
  --duration-badge: 9s;
  --duration-leaf1: 6.5s;
  --duration-leaf2: 7.9s;
  --delay-leaf2: -2.1s;

  --z-base: 0; --z-header: 100; --z-nav-panel: 200; --z-skip-link: 300;
}

/* One declared breakpoint — brief §2.7: "One declared breakpoint: 48rem
   (768px). No other breakpoint appears in site.css." */

@media (min-width: 48rem) {
  :root {
    --layout-gutter:    2.5rem;
    --mark-size: 36px;
  }
}

/* --------------------------------------------------------------------------
   @font-face — self-hosted woff2, latin subset, static instances only.
   Abril Fatface: SIL OFL 1.1, TypeTogether (assets/fonts/OFL.txt). Karla:
   SIL OFL 1.1, Jonathan Pinhorn/Huerta Tipográfica (assets/fonts/OFL.txt).
   Subset to the house declared range, identical on all four faces
   (house-tech-spec §8; brief §2.5). Coverage gap, all four faces alike:
   U+2010, U+2011, U+2012, U+2015, U+2032, U+2033 are declared and absent
   from all four source faces — none render in this site's copy (U+00B7 and
   the curly quotes U+2018/U+2019/U+201C/U+201D, the non-ASCII characters
   this copy actually uses, are carried by every face).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Abril Fatface';
  src: url('../assets/fonts/abril-fatface-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: 'Karla';
  src: url('../assets/fonts/karla-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: 'Karla';
  src: url('../assets/fonts/karla-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: 'Karla';
  src: url('../assets/fonts/karla-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 (house-tech-spec §8, brief §2.4). Donors:
   Gelasio (Georgia's own metric-compatible open-source stand-in, used as the
   measurement proxy since no Georgia binary exists in this build environment
   to read; the CSS still names local('Georgia') first, matching every real
   browser's own system font), Liberation Sans (Arial's metric-compatible
   open-source stand-in, installed locally on this build machine). 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 — xAvgCharWidth ratio drives
   size-adjust; ascent/descent scale with it). See README.md for the
   Lighthouse CLS acceptance check. */

@font-face {
  font-family: 'Abril Fatface Fallback';
  src: local('Georgia');
  font-weight: 400;
  font-style: normal;
  size-adjust: 103.55%;
  ascent-override: 102.17%;
  descent-override: 28.10%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Karla Fallback';
  src: local('Arial');
  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 Bold Fallback';
  src: local('Arial Bold'), local('Arial');
  font-weight: 700;
  font-style: normal;
  size-adjust: 100.06%;
  ascent-override: 91.64%;
  descent-override: 25.18%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Karla Italic Fallback';
  src: local('Arial Italic'), local('Arial');
  font-weight: 400;
  font-style: italic;
  size-adjust: 93.62%;
  ascent-override: 97.95%;
  descent-override: 26.92%;
  line-gap-override: 0%;
}