/* ==========================================================================
   tokens.css — By Design Landscapes, Logan UT. Compiled from
   runs/by-design-landscapes-logan-ut/brief.md (C3 approved 2026-08-25).
   Every value below is the brief's — §3 palette, §4 type, §5.1 layout,
   §7.1 motion. This file is the only place raw values live (house-tech-spec
   §3). Family: editorial-modern. Archetype: band-rhythm.
   ========================================================================== */

:root {

  /* --- Colour — brief §3.2. One deliberate mode: light. -------------------- */

  --scheme: light;

  --color-bg:          #F5F3ED;  /* linen — cool-warm editorial paper */
  --color-surface:     #EAE6DA;  /* raised plate / band-internal panel ground */
  --color-ink:         #1E2A28;  /* near-black w/ juniper undertone */
  --color-ink-muted:   #566361;
  --color-accent:      #3E6E68;  /* DOMINANT — juniper. Clears AA body text directly. */
  --color-accent-deep: #24443F;  /* CTA fill only */
  --color-accent-ink:  #F5F3ED;  /* text ON accent-deep fills (CTA labels) only */
  --color-accent-2:    #8A6A3E;  /* earth — AA-large/icon-fill/index-numeral ONLY, never small body text (brief §3, row 8) */
  --color-hairline:    #DDD6C4;  /* fact-row dividers — decorative, not a text pairing */
  --color-atmo-1:      #E1EEEB;  /* hero radial stop, cool */
  --color-atmo-2:      #EFE7D2;  /* hero radial stop, warm */

  /* House-required structural colours (consumed by base.css) */
  --color-border: var(--color-hairline);
  --color-focus: var(--color-accent);   /* 5.20:1 on bg / 4.63:1 on surface — brief §3.3 rows 5–6, comfortably above the 3:1 non-text-contrast floor */

  /* No dark band on this site (band-rhythm here alternates rule colour only,
     never a dark ground) — --color-focus-on-band intentionally left unset,
     per tokens.css's own house instruction. */

  --color-selection-bg: var(--color-accent);
  --color-selection-ink: var(--color-accent-ink);

  /* --- Typography — brief §4 --------------------------------------------- */

  --font-display: 'Archivo', 'Archivo Fallback', Arial, sans-serif;
  --font-body:    'Source Serif 4', 'Source Serif 4 Fallback', Georgia, serif;

  --font-weight-body:        400;
  --font-weight-body-strong: 600;
  --font-weight-display:     700;

  /* Chrome-only face — brief §4.1: reserved for the eyebrow, the primary
     CTA's button label, form field labels and footer meta. Zero-byte,
     zero-latency; not counted against the 2-family/4-file font budget
     because no @font-face is requested for it. */
  --font-chrome: system-ui, sans-serif;

  /* --- Type scale — brief §4.5, fluid clamp(), computed across the range -- */

  --text-eyebrow: clamp(0.7rem,  0.6rem + 0.35vw, 0.82rem);
  --text-h1:      clamp(1.9rem,  1.3rem + 3vw,    3.4rem);
  --text-h2:      clamp(1.4rem,  1.1rem + 1.4vw,  2.1rem);
  --text-body:    clamp(1rem,    0.94rem + 0.3vw, 1.0625rem);
  --text-small:   clamp(0.85rem, 0.8rem + 0.2vw,  0.95rem);

  /* Fixed size floor for every running-index numeral/letter (brief §3.5): the
     WCAG large-text threshold at any weight, so accent-2's 4.49:1 (row 8)
     legitimately reads against the 3:1 large-text floor rather than the 4.5:1
     normal floor it would otherwise fail by 0.01. */
  --text-index-mark: 1.5rem;

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

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;

  /* --- Space — house scale, unchanged (brief does not 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;

  /* One inter-section rhythm token (design-rules §7.1). Band-rhythm's own
     bands are this site's entire body-below-hero, so this is the page's
     dominant vertical measure; --space-xl matches the skeleton default and
     the family's generous-editorial spacing (brief §3.1/§3 rationale). */
  --section-gap: var(--space-xl);

  /* --- Layout --------------------------------------------------------------
     Container is the 1180px rail brief §8's desktop plank-1 table computes
     from directly ("Content column is capped by the 1180px rail... = 1132px
     content width"). Gutter is fluid, tuned so it resolves to EXACTLY the
     brief's two stated endpoints: 1.25rem (20px) at ≤533px viewport — giving
     the stated 335px content width at 375 — and 1.5rem (24px) at ≥1200px —
     giving the stated 1132px content width at 1440 (1180 − 2×24). */

  --layout-container: 73.75rem;                        /* 1180px */
  --layout-gutter: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  --layout-measure: 62ch;                               /* general reading measure — house default; the brief's 34ch is the hero lead's own constraint, not the site's */
  --hero-lead-measure: 34ch;                            /* brief §8: "lead line (2 lines, 34ch max-width)" */
  --layout-tap-min: 44px;

  /* Hero's own top offset — brief §8's plank-1 arithmetic states this exact
     value: "hero border-top (3px) + padding-top (1.6rem=25.6px) puts the
     first element at y≈130" (101 sticky chrome + 3 + 25.6 = 129.6 ≈ 130). */
  --hero-pad-top: 1.6rem;

  /* The living-hero field's own height — brief §8's plank-1 table states two
     real sample points directly: 120px @375 and 220px @1440 (not a fixed
     aspect-ratio; the field's aspect genuinely widens at desktop, "the
     generous-desktop-hero allowance"). Fitted exactly to both: 120px at
     375px viewport width, 220px at 1440px viewport width, linear between. */
  --hero-field-height: clamp(7.5rem, 5.3rem + 9.39vw, 13.75rem);

  /* --- Radius / shadow / border — brief is silent; house neutral defaults,
     consistent with an editorial/rule-led register (no card chrome, no
     shadows anywhere on this site). ----------------------------------------- */

  --radius-none: 0;
  --radius-sm: 2px;
  --radius-pill: 999px;

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

  /* --- Motion — brief §7.1 -------------------------------------------------- */

  --ease-signature: cubic-bezier(.16, 1, .3, 1);   /* the rule-draw */
  --ease-settle:    ease-in-out;                    /* the four vignette settle loops */
  --ease-standard:  cubic-bezier(0, 0, 0.2, 1);     /* standard scroll reveal */
  --ease-out: var(--ease-standard);
  --ease-in-out: var(--ease-settle);

  --duration-rule-draw: 900ms;
  --duration-settle-1: 4600ms;  /* vignette 1 — Hardscapes */
  --duration-settle-2: 5800ms;  /* vignette 2 — Design */
  --duration-settle-3: 6400ms;  /* vignette 3 — Installation */
  --duration-settle-4: 5200ms;  /* vignette 4 — Tree & Plant Care */
  --duration-reveal: 500ms;

  /* House names base.css/site.css already call (kept as aliases so the
     shared reveal system and reduced-motion kill switch need no rewrite). */
  --duration-fast: 140ms;
  --duration-base: var(--duration-reveal);
  --duration-slow: var(--duration-reveal);

  --reveal-shift: 8px;       /* brief §7.2: fade + rise 8px on first intersection */
  --reveal-stagger: 60ms;    /* brief §7.2: staggered 60ms between siblings */

  /* Vignette settle stagger — brief §7.3: 0s/0.9s/1.8s/2.6s from the moment
     the rule finishes drawing. */
  --settle-stagger-1: 0ms;
  --settle-stagger-2: 900ms;
  --settle-stagger-3: 1800ms;
  --settle-stagger-4: 2600ms;
  --settle-travel: 3px;      /* translateY(-3px) peak, brief §7.3 */

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

/* prefers-reduced-motion: reduce collapses every duration at its source
   (base.css already does --duration-fast/base/slow; these are this site's
   own extra timing tokens, brief §7.4). The still frame: rule fully drawn
   (stroke-dashoffset:0 by default, outside the no-preference query), all
   four vignettes at rest (translateY(0) opacity 0.85, no animation) — see
   site.css's own reduced-motion block for the mechanism. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-rule-draw: 0.01ms;
    --duration-settle-1: 0.01ms;
    --duration-settle-2: 0.01ms;
    --duration-settle-3: 0.01ms;
    --duration-settle-4: 0.01ms;
    --settle-travel: 0px;
  }
}

/* --------------------------------------------------------------------------
   @font-face — brief §4.1/§4.2. Two licensed families (OFL 1.1, self-hosted
   Google Fonts), 4 static woff2 files (Archivo 700; Source Serif 4 400,
   600, 400-italic) — no variable font, no font-variation-settings anywhere.
   Subset to the house declared safe range (house-tech-spec §8), identical on
   all four files. Metrics-matched fallbacks MEASURED (scripts/font-metrics.mjs,
   fontTools cmap/hmtx reads against the real shipped files, method per
   house-tech-spec §8) — never invented.

   COVERAGE GAP, recorded rather than silently shipped (house-tech-spec §8):
   U+2010, U+2011, U+2012 and U+2015 are in the house declared range and are
   absent from all four of this site's faces (measured against the shipped
   woff2s, fontTools cmap). Not narrowed: every face lacks the same four, so a
   page rendering any of them falls to the metrics-matched fallback
   consistently across every face, never mid-sentence in two faces — the same
   gap already recorded for the pilot site's two faces.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo Fallback';
  /* Arial for Windows/macOS; Liberation Sans is Red Hat's metric-compatible
     substitute and is what most Linux/Android systems carry instead of
     Arial — covering it is what keeps this override real off Windows/macOS
     rather than silently falling through to a generic sans with different
     metrics (house-tech-spec §8, the local()-list gap named there). Both
     are metrically identical, so one set of overrides serves both. */
  src: local('Arial'), local('Liberation Sans');
  size-adjust: 97.44%;
  ascent-override: 90.11%;
  descent-override: 21.55%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Source Serif 4 Fallback';
  src: local('Georgia');
  font-style: normal;
  size-adjust: 108.29%;
  ascent-override: 95.67%;
  descent-override: 30.93%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Source Serif 4 Fallback';
  src: local('Georgia');
  font-style: italic;
  size-adjust: 97.03%;
  ascent-override: 106.77%;
  descent-override: 34.53%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/Archivo-Bold.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: 'Source Serif 4';
  src: url('../assets/fonts/SourceSerif4-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: 'Source Serif 4';
  src: url('../assets/fonts/SourceSerif4-SemiBold.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;
}

@font-face {
  font-family: 'Source Serif 4';
  src: url('../assets/fonts/SourceSerif4-Italic.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;
}