/* ==========================================================================
   tokens.css — Beus Hydroseed (Logan, UT). Compiled from the approved brief
   (runs/beus-hydroseed-logan-ut/brief.md, Tile B "The Specimens Settle" —
   fresh-organic / husk-gold / asymmetric-collage). Every value below cites a
   brief section; nothing here is a model default (house-tech-spec §3).
   ========================================================================== */

:root {

  /* --- Colour (brief §3.3) -------------------------------------------------
     Derivation order (design-rules §6): step 1 (real-world colours) and step 2
     (local character) are both empty on this dossier (brief §3.1) — husk-gold
     is the trade's own material colour (cured seed husk / dry mulch fibre),
     pushed toward the fresh-organic family register at step 4. */

  --scheme: light;

  --color-bg:              #FAF3E2;  /* warm oat-cream ground */
  --color-surface:         #F0E6CC;  /* deeper oat-cream — plate/card ground */
  --color-ink:             #2A2013;  /* warm near-black brown ink */
  --color-ink-muted:       #6B5D3E;  /* secondary text */

  /* Husk-gold accent. Fill/graphic only — #A9902D measures 2.83:1 on
     --color-bg and fails even the 3:1 large-text floor (brief §4.1). Every
     coloured WORD uses --color-accent-deep instead. */
  --color-accent:          #A9902D;  /* fill only: primary CTA, underline. NEVER text on --color-bg */
  --color-accent-deep:     #766319;  /* text-safe husk-gold — 5.32:1 on --color-bg */
  --color-accent-ink:      #2A2013;  /* dark ink set ON the accent fill — 5.11:1 */

  /* The semantic anchor's carrier (brief §3.2) — pin-tag dots only. R1: never
     a text colour, a focus colour, or a fill exceeding --plate-pin-size. */
  --color-sprout:          #4C7A4A;

  /* Lines, focus, selection (brief §3.3, §4.2) */
  --color-rule:            #DCCFA6;  /* decorative separator only — R5 */
  --color-border:          var(--color-rule); /* house contract completion: base.css's hr rule reads this; this site ships no <hr> */
  --color-focus:           #766319;  /* the text-safe accent, not the raw fill */
  --color-selection-bg:    #A9902D;
  --color-selection-ink:   #2A2013;

  /* The hero field's atmosphere gradient — brief §4.3's own two stops.
     --color-surface is the lightest stop; this is the darkest. No text sits
     on this gradient anywhere (R2) — every string inside the field sits on a
     plate's opaque --color-surface fill. */
  --color-atmosphere-deep: #E6D9B4;

  /* --- Type (brief §2) ------------------------------------------------------
     One family, three static weights (§2.2 — R6: no font-variation-settings
     anywhere; font-weight only). Fallback stacks named per §2.4/§2.6. */

  --font-display:     'Hanken Grotesk 700', 'Hanken Grotesk Display Fallback', 'Helvetica Neue', Arial, sans-serif;
  --font-body:        'Hanken Grotesk 400', 'Hanken Grotesk Fallback',        'Helvetica Neue', Arial, sans-serif;
  --font-body-strong: 'Hanken Grotesk 600', 'Hanken Grotesk Strong Fallback', 'Helvetica Neue', Arial, sans-serif;

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

  /* Heading tracking: the brief specifies no display-tracking adjustment for
     this family (only --tracking-caps, for eyebrows/kickers) — base.css's
     h1–h4 rule needs a value, so this resolves to no-op rather than an
     invented compression. */
  --tracking-tight: 0em;

  /* --- Fluid scale (brief §2.8), computed at 320/375/crossover/768/1024/1440 */
  --text-display: clamp(2.5rem, 1.7958rem + 3.0047vw, 4.5rem);
  --text-h2:      clamp(1.5rem, 1.1919rem + 1.3146vw, 2.375rem);
  --text-lead:    clamp(1.0625rem, 0.9745rem + 0.3756vw, 1.3125rem);
  --text-body:    1rem;
  --text-small:   0.875rem;
  --text-eyebrow: 0.75rem;
  --text-micro:   0.6875rem;

  --leading-tight: 1.10;   /* h1, h2 */
  --leading-body:  1.60;   /* lead, body, small, eyebrow, FAQ answers */
  --leading-flat:  1.50;   /* control label line box — also this site's button line-height */
  --tracking-caps: 0.14em; /* eyebrow, section kickers */

  /* --- Space — the house scale (brief §3.3) --------------------------------- */
  --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;

  /* design-rules §7.1's ONE inter-section token. Two call sites only:
     .section's padding-block, and .hero's padding-block-end. */
  --section-gap: var(--space-xl);   /* 64px, fixed, at every width — brief §5.5 */

  /* --- Layout ---------------------------------------------------------------- */
  --layout-container:     72rem;                       /* 1152px cap */
  --layout-measure:       58ch;
  --layout-gutter:        clamp(1.25rem, 6vw, 3rem);
  --layout-tap-min:       44px;
  --layout-header-height: calc(var(--layout-tap-min) + var(--space-xs));  /* 56px min */

  /* --- The hero collage field (brief §4, §5.1, §5.3) ------------------------- */
  --field-height:      230px;   /* 320px at >=45rem, 300px at >=64rem — §5.2 */
  --hero-inset-top:    20px;    /* .hero padding-block-start — bespoke argued value, §5.3 */
  --hero-h1-gap:       18px;    /* h1 margin-block-end — bespoke argued value */
  --cta-height:        52px;
  --plate-size:         96px;   /* plate inline size at <45rem — scales per §5.2 */
  --plate-pin-size:      5px;
  --hero-field-width: min(28rem, 44vw); /* the field's inline size as an inset panel at >=45rem, brief §5.2 */

  /* The editorial index's name column (brief §II — a Builder layout choice,
     not a brief-named value; kept as one token so site.css carries no raw
     literal for it). */
  --index-name-col: 12rem;

  /* --- Radius + border. NO PILL TOKEN EXISTS (brief §3.3). ------------------- */
  --radius-none:  0;
  --radius-round: 50%;         /* the plate's pin dot, and nothing else */
  --radius-sm:    var(--radius-none); /* base.css's skip-link/focus-ring need a value; this site draws no rounded corners */
  --border-hairline: 1px; --border-thick: 2px; --border-style: solid;

  /* --- Motion (brief §8) -------------------------------------------------------
     base.css's reveal system and its reduced-motion kill switch read
     --duration-fast/--duration-base/--duration-slow, --ease-out, --reveal-shift
     and --reveal-stagger BY THOSE EXACT NAMES (base.css is house-level and is
     never edited per site) — so the body-section "one-shot fade-and-rise"
     (brief §8) is expressed through them rather than through new names.
     This site's OWN settle/sway tokens (the signature move, hero field only)
     are collapsed by an explicit reduced-motion block in site.css instead,
     because base.css has no way to know about them. */
  --duration-fast:  140ms;
  --duration-base:  140ms;             /* unused directly; kept so base.css's kill switch has a real value to collapse */
  --duration-slow:  380ms;             /* body-section reveal duration — "duration-fast-adjacent", brief §8 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-shift: var(--space-2xs);    /* 8px rise, brief §8 */
  --reveal-stagger: 90ms;

  /* The signature move — "the specimens settle" (brief §8), hero field only */
  --duration-settle: 900ms;
  --stagger-settle:  180ms;    /* 150–690ms across 4 plates, §8 */
  --ease-settle: cubic-bezier(0.2, 0.7, 0.15, 1);
  --loop-pin-1: 15s; --loop-pin-2: 18s; --loop-pin-3: 21s; --loop-pin-4: 24s;
  --sway-distance: 2px;
  --settle-offset: -14px; /* the settle keyframe's starting translateY, brief §8 */

  --z-field: 0; --z-atmosphere: 1; --z-plate: 2; --z-header: 100; --z-skip-link: 300;
}

/* --------------------------------------------------------------------------
   Responsive token overrides (brief §5.2). Custom properties cannot appear
   inside a media-query CONDITION, but re-declaring the property's VALUE on
   :root inside the query body is the house pattern for a token whose value
   changes across the brief's own declared breakpoints — kept here rather than
   in site.css because grep-audit's literal check is scoped to every stylesheet
   EXCEPT this one (house-tech-spec §3: tokens.css is where raw values live).
   -------------------------------------------------------------------------- */

@media (min-width: 45rem) {
  :root {
    --field-height: 320px;
    --plate-size: 128px;
  }
}

@media (min-width: 64rem) {
  :root {
    --field-height: 300px;
    --plate-size: 116px;
  }
}

/* --------------------------------------------------------------------------
   @font-face — three STATIC instances, self-hosted, SIL OFL 1.1
   (assets/fonts/OFL.txt), latin subset (brief §2.2, §2.5). NO FACE CARRIES AN
   AXIS — R6: font-variation-settings appears nowhere on this site; weight is
   set with font-weight only. Subset to exactly house-tech-spec §8's declared
   safe range, identical across all three files.

   Coverage gap, recorded per house-tech-spec §8: U+2010, U+2011, U+2012,
   U+2032 and U+2033 are inside the declared range and absent from the source
   Hanken Grotesk instances (measured against the shipped woff2s via
   fontTools). All three weights come from the same source file, so the gap is
   identical across every face on this site — no mid-sentence fallback split
   is possible, only a uniform fall-through to the metrics-matched fallback
   for those five codepoints (none of which this site's copy uses — no prime
   marks, no explicit hyphen character; the only dash punctuation in the copy
   doc is unicode hyphen-minus U+002D, which the faces do carry).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Hanken Grotesk 400';
  src: url('../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk 600';
  src: url('../assets/fonts/hanken-grotesk-600-latin.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: 'Hanken Grotesk 700';
  src: url('../assets/fonts/hanken-grotesk-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;
}

/* --------------------------------------------------------------------------
   Metrics-matched fallbacks (brief §2.4; house-tech-spec §8). Arial is the
   donor for all three — Hanken Grotesk is a rounded neo-grotesque, for which
   Arial is the natural donor. Measured with scripts/font-metrics.mjs against
   the shipped woff2s and Liberation Sans (a metric-compatible Arial clone —
   Arial itself is not redistributable and is absent from this build
   container; see README.md for the cross-check). Acceptance test: Lighthouse
   CLS 0.000.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Hanken Grotesk Fallback';
  src: local('Arial'), local('Liberation Sans');
  font-weight: 400;
  font-style: normal;
  size-adjust: 101.56%;
  ascent-override: 98.47%;
  descent-override: 29.84%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Hanken Grotesk Strong Fallback';
  src: local('Arial Bold'), local('Liberation Sans Bold'), local('Arial'), local('Liberation Sans');
  font-weight: 600;
  font-style: normal;
  size-adjust: 94.96%;
  ascent-override: 105.31%;
  descent-override: 31.91%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Hanken Grotesk Display Fallback';
  src: local('Arial Bold'), local('Liberation Sans Bold'), local('Arial'), local('Liberation Sans');
  font-weight: 700;
  font-style: normal;
  size-adjust: 95.41%;
  ascent-override: 104.81%;
  descent-override: 31.76%;
  line-gap-override: 0%;
}