/* ==========================================================================
   tokens.css — the design brief, compiled. Alluring Lawn Service, Nampa ID —
   brief.md v1 (C3 approved 2026-08-25). Family: warm-craft. Archetype:
   band-rhythm ("the edge holds"). Dominant hue: sagebrush hsl(90.0, 18.4%,
   27.8%). Display: Fraunces + Fraunces Italic. Body: Barlow.
   THIS FILE IS THE ONLY PLACE RAW VALUES LIVE (house-tech-spec §3).
   ========================================================================== */

:root {

  /* --- Colour (brief §3.2). Derivation: design-rules §6 order — dossier §4.5
     empty → local character (sagebrush, the valley's unwatered ground cover)
     → playbook §6.1 anchor (green/earth/sky) → ref-010's palette logic. One
     deliberate mode: light. */

  --scheme: light;

  /* ---- grounds ---- */
  --color-bg:               #F5F2E9;   /* hsl(45, 35%, 94%)  hay-bone — the EARTH support */
  --color-surface:          #FBF9F2;   /* hsl(47, 56%, 96%)  paper — raised bands, fields, plates */
  --color-band:             #47543A;   /* the ONE saturated band; same value as --color-accent, by design (brief §3.2) */

  /* ---- ink ---- */
  --color-ink:              #23271C;   /* hsl(85, 17%, 13%) */
  --color-ink-muted:        #565C49;   /* hsl(76, 12%, 33%) */

  /* ---- accent ---- */
  --color-accent:           #47543A;   /* DOMINANT — sagebrush hsl(90.0, 18.4%, 27.8%) */
  --color-accent-ink:       #FBF9F2;   /* text and marks ON the accent */

  /* House-required structural colours (consumed by base.css) */
  --color-border:           #7E8770;   /* 1.4.11-bound: field borders, button outlines, the strip frame */
  --color-focus:            #23271C;   /* :focus-visible on light grounds, outline-offset 2px */

  /* Dark-band-safe focus ring — this site ships one dark band (§IV). */
  --color-focus-on-band:    #FBF9F2;

  --color-selection-bg:     #47543A;
  --color-selection-ink:    #FBF9F2;

  /* ---- brief-specific colours ---- */
  --color-sky:              #C9D6DA;   /* hsl(194, 18%, 82%) — the anchor's SKY support: season rail, FAQ marker */
  --color-ink-muted-onband: #D8D2BD;   /* NEVER on a light ground */
  --color-accent-onband:    #C6CFB6;   /* the cut, the numeral and the tick, on the dark band. NEVER on a light ground */
  --color-rule:             #CFCDBB;   /* DECORATIVE separators only — never text ground, never a UI boundary */

  /* hero atmosphere (brief §0 living-hero requirement / §3.2) */
  --color-atmo-1:           #FAF7EE;   /* radial stop 1, lightest */
  --color-atmo-3:           #E8E3D2;   /* radial stop 2, darkest */


  /* --- Typography (brief §2.8). Two families, four woff2 — the §5 ceiling.
     Static Fraunces instances; font-variation-settings ships nowhere on this
     site (house-tech-spec §8's wght/opsz trap unreachable by construction). */

  --font-display:        'Fraunces', 'Fraunces Fallback', Georgia, 'Iowan Old Style', serif;
  --font-display-italic: 'Fraunces Italic', 'Fraunces Italic Fallback', Georgia, serif;
  --font-body:            'Barlow', 'Barlow Fallback', 'Helvetica Neue', Arial, sans-serif;

  --font-weight-display:      700;   /* the only display weight on this site */
  --font-weight-emphasis:     600;   /* Fraunces Italic, the accent word */
  --font-weight-body:         400;
  --font-weight-body-strong:  600;

  /* Type scale — fluid clamp(), both ends at 375/1440 (brief §2.9). --text-hero
     and --text-h3 are skeleton-required names, aliased below (brief §2.8). */

  --text-display: clamp(2.125rem, 1.42rem + 3.00vw, 4.125rem);
  --text-h2:      clamp(1.375rem, 1.10rem + 1.17vw, 2.25rem);
  --text-lead:    clamp(1.0625rem, 1.00rem + 0.27vw, 1.375rem);
  --text-body:    clamp(1rem, 0.965rem + 0.15vw, 1.125rem);
  --text-small:   0.8125rem;   /* 13px, fixed at every width */
  --text-eyebrow: 0.75rem;     /* 12px, fixed at every width */
  --text-micro:   0.6875rem;   /* 11px, fixed at every width */

  --text-hero: var(--text-display);   /* skeleton alias — brief §2.8 */
  --text-h3:   var(--text-h2);        /* skeleton alias — brief §2.8 */

  --leading-display: 1.29;
  --leading-h2:      1.18;
  --leading-lead:    1.50;
  --leading-body:    1.62;
  --leading-eyebrow: 1.6667;   /* 12 × 1.6667 = 20.00px at every width */
  --leading-small:   1.75;     /* 13 × 1.75 = 22.75px at every width */
  --leading-tight:   var(--leading-display);   /* base.css h1–h4 default */
  --leading-snug:    1.25;                     /* buttons, the expiry bar */

  --tracking-tight:  -0.012em;  /* h1 */
  --tracking-normal:  0em;
  --tracking-wide:    0.18em;   /* eyebrow, kickers, labels */


  /* Space — house scale, unmodified. Brief §5.3's gap hierarchy resolves onto
     it exactly (64/40/24/16/12px = xl/lg/md/sm/xs). */

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

  /* Inter-section rhythm — brief §5.3's one token: .band's padding-block and
     the hero's padding-block-end. */
  --section-gap: var(--space-xl);   /* 64px, fixed at every width */

  /* Layout — breakpoints 375/640/1024/1440 (brief §5.2). Page inline padding
     and hero padding-block-start share the same numbers, one token serves
     both. */

  --layout-container: 75rem;          /* 1200px — brief §5.2 --measure-page at ≥1024 */
  --layout-measure: 62ch;             /* max reading line length, prose blocks */
  --layout-gutter: 24px;              /* < 640: page inline padding + hero padding-block-start */
  --layout-tap-min: 44px;             /* WCAG touch target floor */

  --layout-cta-height: 52px;          /* < 1024 primary CTA height — brief §5.2 */
  --layout-hero-col: 40rem;           /* 640px hero type column, ≥1024 — brief §5.2 */
  --layout-tick: 12px;                /* the leading tick on every sub-list row — brief §6.7 */
  --layout-row-pad: 11px;             /* list row padding, top/bottom, fixed — brief §5.3 rank 7 */
  --layout-header-height: 56px;       /* sticky chrome, brief §5.5 — the header half of the 101px stack */

  /* Header's sticky top-offset. Zero here (permanent file, no expiry bar once
     sold); preview.css overrides it to the bar's height while a preview, so
     the header self-corrects the moment preview.css is deleted at purchase. */
  --header-sticky-offset: 0px;

  /* Radius/shadow/border — house scale, unmodified. Craft register reads
     through the cut and flat grounds; no box-shadow ships on this 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(35 39 28 / 0.06);
  --shadow-md: 0 6px 24px rgb(35 39 28 / 0.09);
  --shadow-lg: 0 24px 60px rgb(35 39 28 / 0.14);

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

  /* The signature — "the edge holds" (brief §5.1c). A 3px accent cut at the
     top of every band and at the hero's bed/turf line; a 3×10px riser at the
     entering end. Both fixed, not fluid, at every breakpoint. */
  --cut-w:      3px;
  --cut-riser: 10px;

  /* Motion (brief §8): one draw (the hero cut, once on load) and four slow
     ambient loops sharing no common factor. base.css collapses every
     duration under prefers-reduced-motion. */

  --duration-fast:  140ms;   /* focus and hover transitions */
  --duration-base:  320ms;   /* the scroll reveal */
  --duration-slow: 1200ms;   /* the cut draw — once */
  --delay-cut:      260ms;

  --ease-out:      cubic-bezier(.20, .60, .20, 1);   /* == brief's --ease-standard */
  --ease-standard: cubic-bezier(.20, .60, .20, 1);
  --ease-draw:     cubic-bezier(.20, .72, .22, 1);
  --ease-in-out:   ease-in-out;

  --reveal-shift: 12px;
  --reveal-stagger: 60ms;    /* brief §8.1: staggered 60ms within a group, max 4 elements */

  /* ambient satellite loops — deliberately non-synchronised, no common factor */
  --loop-seed-1: 18s;  --loop-seed-2: 25s;  --loop-seed-3: 34s;  --loop-haze: 47s;

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

/* Gutter/CTA-height steps (brief §5.2): 24→40→64px at 640/1024; CTA 52→56 at
   1024. */
@media (min-width: 40em) { :root { --layout-gutter: 40px; } }
@media (min-width: 64em) { :root { --layout-gutter: 64px; --layout-cta-height: 56px; } }

/* @font-face — self-hosted woff2, SIL OFL 1.1 (brief §2.1). Static Fraunces
   instances (brief §2.2), subset to the house range (house-tech-spec §8,
   brief §2.4). Coverage-gap + fallback measurements: README.md. */

@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-display-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: 'Fraunces Italic';
  src: url('../assets/fonts/fraunces-italic-600.woff2') format('woff2');
  font-weight: 600;
  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: 'Barlow';
  src: url('../assets/fonts/barlow-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: 'Barlow';
  src: url('../assets/fonts/barlow-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) — measured, not
   eyeballed; method and donor-font record in README.md § Fonts. */

@font-face {
  font-family: 'Fraunces Fallback';
  src: local('Georgia');
  size-adjust: 103.6%;
  ascent-override: 94.4%;
  descent-override: 24.6%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Fraunces Italic Fallback';
  src: local('Georgia Italic'), local('Georgia');
  font-style: italic;
  size-adjust: 102.2%;
  ascent-override: 95.7%;
  descent-override: 25.0%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Barlow Fallback';
  src: local('Helvetica Neue'), local('Arial');
  font-weight: 400;
  size-adjust: 93.3%;
  ascent-override: 107.2%;
  descent-override: 21.4%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Barlow Fallback';
  src: local('Helvetica Neue'), local('Arial');
  font-weight: 600;
  size-adjust: 95.3%;
  ascent-override: 104.9%;
  descent-override: 21.0%;
  line-gap-override: 0%;
}