/* ==========================================================================
   tokens.css — the design brief, compiled.
   Green Lawn Care & Landscape Inc., Boise ID.
   Source: runs/green-lawn-care-and-landscape-boise-id/brief.md v1 (APPROVED).
   Every value below is stated there. Nothing here was chosen here.
   THIS FILE IS THE ONLY PLACE RAW VALUES LIVE (house-tech-spec §3).
   ========================================================================== */

:root {

  /* --- Colour — brief §3.2. §3.1: step 1 is EMPTY and recorded as such (no
     brand_color, so no echo is owed and none is faked); step 2 gives the two
     landscapes and the water that joins them; step 3's green anchor is
     carried by IMAGERY — the only green here is alive, it exists inside
     generated frames only, and it is a token nowhere. Ratios: brief §4. */

  --scheme: light;

  /* required roles */
  --color-bg: #EDF1F0;                 /* glacier stone — page ground */
  --color-surface: #F7FAF9;            /* raised plate: form fields, ledger */
  --color-ink: #12211F;                /* 14.60:1 on bg · 15.83:1 on surface */
  --color-ink-muted: #4A5957;          /* 6.45:1 on bg · 6.99:1 on surface */
  --color-accent: #0C5C64;             /* DOMINANT — hsl(185.5, 78.6%, 22.0%) */
  --color-accent-ink: #EDF1F0;         /* text ON accent — 6.76:1 */

  /* structural. ONE border token carries every rule, separator and field
     border, clearing 1.4.11's 3:1 on both light grounds. */
  --color-border: #758785;             /* 3.32:1 vs bg · 3.60:1 vs surface */
  --color-focus: #0C5C64;              /* :focus-visible on light grounds */
  --color-focus-on-band: #7FD3D8;      /* REQUIRED — this site has a dark band */
  --color-selection-bg: #0C5C64;
  --color-selection-ink: #EDF1F0;

  /* brief-specific */
  --color-band: #082F33;               /* the ONE dark band, §6 §IV */
  --color-accent-onband: #7FD3D8;      /* on-dark sibling. NEVER on a light ground */
  --color-atmo-1: #F7FAF9;             /* hero radial, stop 1 (lightest) */
  --color-atmo-2: #E2EBEA;             /* hero radial, stop 2 */
  --color-atmo-3: #D6E4E4;             /* hero radial, stop 3 (darkest) */


  /* --- Typography — brief §2.9. Two families, three woff2. Weight is ALWAYS
     and ONLY set with font-weight. Optical size is instanced into the shipped
     files at a fixed opsz 32 (brief §0.A, §2.2), so no axis is left for a
     stylesheet to address and none does — brief §6.6 B3. --- */

  --font-display: 'Newsreader', 'Newsreader Fallback', 'Times New Roman', Georgia, serif;
  --font-display-italic: 'Newsreader Italic', 'Newsreader Italic Fallback', 'Times New Roman', Georgia, serif;
  --font-body: 'Instrument Sans', 'Instrument Sans Fallback', 'Helvetica Neue', Arial, sans-serif;

  --font-weight-body: 400;
  --font-weight-body-strong: 600;
  --font-weight-display: 400;          /* Newsreader carries the display at 400 */
  --font-weight-display-mid: 500;      /* price figures, wordmark */

  /* Scale, computed at every declared breakpoint in brief §2.10. */
  --text-display: clamp(2.75rem, 2.1rem + 2.6vw, 4.75rem);      /* 44.00 → 71.04 */
  --text-display-sub: clamp(2rem, 1.6rem + 1.6vw, 3.25rem);     /* 32.00 → 48.64 */
  --text-h2: clamp(1.375rem, 1.24rem + 0.58vw, 2rem);           /* 22.02 → 28.19 */
  --text-row: clamp(1.125rem, 1.05rem + 0.2vw, 1.3125rem);      /* brief §6 §II */
  --text-quote: 1.25rem;                                        /* 20px — the band */
  --text-lead: clamp(1.0625rem, 1.01rem + 0.22vw, 1.25rem);     /* 16.99 → 19.33 */
  --text-body: clamp(1rem, 0.965rem + 0.15vw, 1.125rem);        /* 16.00 → 17.60 */
  --text-small: 0.8125rem;             /* 13px, fixed at every width */
  --text-eyebrow: 0.6875rem;           /* 11px, fixed at every width */

  /* Aliases: brief §2.9 retires both here; aliasing keeps skeleton call
     sites working. */
  --text-hero: var(--text-display);
  --text-h3: var(--text-h2);

  --leading-tight: 1.06;               /* h1 */
  --leading-snug: 1.18;                /* h2, h3 */
  --leading-lead: 1.50;
  --leading-body: 1.60;
  --leading-eyebrow: 1.36;
  --leading-facts: 1.75;

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


  /* --- Space — the house scale; brief §5.3 names each step it uses -------- */

  --space-3xs: 0.25rem;                /* 4 */
  --space-2xs: 0.5rem;                 /* 8  — datum → eyebrow */
  --space-xs: 0.75rem;                 /* 12 — eyebrow → h1 at <1024, row padding */
  --space-sm: 1rem;                    /* 16 */
  --space-md: 1.5rem;                  /* 24 — the workhorse gap */
  --space-lg: 2.5rem;                  /* 40 — the hero grid's column gap */
  --space-xl: 4rem;                    /* 64 — hero padding-block-start ≥1024 */
  --space-2xl: 6rem;                   /* 96 — the section boundary */
  --space-3xl: 9rem;

  /* ONE token, two call sites — .section's padding-block and the hero's
     padding-block-end. 96px at EVERY width (brief §5.3). */
  --section-gap: var(--space-2xl);


  /* --- Layout — brief §5.1. Content column 335/576/928/1152, centred; the
     gutter floor binds at 375 and its ceiling at 1024. ----------------- */

  --layout-container: 72rem;           /* the content column's cap — 1152px */
  --layout-measure: 62ch;
  --layout-gutter: clamp(1.25rem, 5vw, 3rem);   /* 20 · 32 · 48 · 48 */
  --layout-tap-min: 44px;

  --header-height: 3.5rem;             /* 56px site header, brief §6 */
  --cta-height: 3.25rem;               /* 52px primary control at <1024, §5.5 */
  --cta-height-lg: 3.5rem;             /* 56px at ≥1024, §5.2 */
  --band-cta-height: 3.125rem;         /* 50px in-band tel: button, §6 §IV */
  --numeral-size: 1.75rem;             /* 28px circled numeral, §6 §IV */
  --tick-length: 1.5rem;               /* 24px CTA tick, §6 §I */
  --band-image-opacity: 0.18;          /* slot 4 under --color-band, §7.2 */
  --hero-ratio: 5 / 4;                 /* §5.4 */
  --strip-ratio: 3 / 1;                /* slots 2 and 3, §7.2 */
  --snow-ratio: 3 / 2;                 /* slot 5, §7.2 */


  /* --- Radius / shadow / border — brief §3.2 ----------------------------- */

  --radius-none: 0;                    /* everything except the CTA */
  --radius-sm: 2px;                    /* the primary CTA only */
  --shadow-none: none;                 /* NO SHADOW IS USED ANYWHERE */
  --border-hairline: 1px;
  --border-thick: 2px;                 /* the datum */
  --border-style: solid;

  /* Contract tokens, ZERO call sites here: §4 bans uniform radius and a
     shadow on every card, and this site has no cards. */
  --radius-md: 6px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(18 33 31 / 0.06);
  --shadow-md: 0 6px 24px rgb(18 33 31 / 0.09);
  --shadow-lg: 0 24px 60px rgb(18 33 31 / 0.14);


  /* --- Motion — brief §8 ------------------------------------------------- */

  --duration-fast: 140ms;              /* focus/hover transitions */
  --duration-base: 320ms;              /* the scroll reveal */
  --duration-slow: 1000ms;             /* the meltline draw — once */
  --delay-meltline: 240ms;

  --ease-standard: cubic-bezier(.2, .6, .2, 1);
  --ease-draw: cubic-bezier(.19, .86, .28, 1);
  --ease-out: var(--ease-standard);
  --ease-in-out: var(--ease-standard);

  /* ambient satellite loops — co-prime-ish and non-synchronised */
  --loop-mote-1: 19s;
  --loop-mote-2: 26s;
  --loop-mote-3: 33s;
  --loop-haze: 44s;
  --loop-shimmer: 13s;

  /* reduced-motion END states, brief §8.4 — held opacities, named so the
     still frame is composed and not undrawn */
  --still-mote-1: 0.85;
  --still-mote-2: 0.70;
  --still-mote-3: 0.62;
  --still-haze: 0.68;
  --still-shimmer: 0.62;

  --reveal-shift: 0.75rem;             /* 12px — brief §8.1 */
  --reveal-stagger: 60ms;              /* brief §8.1 */

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

/* --------------------------------------------------------------------------
   @font-face — brief §2.1–§2.7. Three files, two families, SIL OFL 1.1,
   self-hosted, no CDN. Every face carries font-display: swap and the ONE
   house declared safe range (spec §8), NOT narrowed per face — that is what
   stops a mid-sentence two-face split. The four fallback percentages per face
   are a MEASUREMENT taken with fontTools against the shipped woff2 and
   recorded in README.md, per brief §2.4's derivation.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Newsreader Fallback';
  src: local('Times New Roman');
  ascent-override: 73.5%;
  descent-override: 26.5%;
  line-gap-override: 0%;
  size-adjust: 95.2%;
}

@font-face {
  font-family: 'Newsreader Italic Fallback';
  src: local('Times New Roman Italic');
  font-style: italic;
  ascent-override: 73.5%;
  descent-override: 26.5%;
  line-gap-override: 0%;
  size-adjust: 95.2%;
}

@font-face {
  font-family: 'Instrument Sans Fallback';
  src: local('Helvetica Neue');
  ascent-override: 97.0%;
  descent-override: 25.0%;
  line-gap-override: 0%;
  size-adjust: 98.6%;
}

@font-face {
  font-family: 'Newsreader';
  src: url('../assets/fonts/newsreader-roman-var.woff2') format('woff2');
  font-weight: 300 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: 'Newsreader Italic';
  src: url('../assets/fonts/newsreader-italic-400-opsz32.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;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('../assets/fonts/instrument-sans-var.woff2') format('woff2');
  font-weight: 400 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;
}