/* ==========================================================================
   tokens.css — the design brief, compiled (house-tech-spec §3).
   Source: runs/duluth-lawn-care-duluth-mn/brief.md §5 (token block), §2.2
   (palette), §4 (type), §8 (device geometry). Every value is the brief's;
   where base.css/site.css need a token §5 doesn't name, it's either the
   unmodified house default (infrastructure, not an aesthetic choice) or an
   alias onto an already contrast-verified brief value — called out inline.
   ========================================================================== */

:root {

  /* --- colour (brief §2.2, §3) -------------------------------------------- */
  --scheme: light;

  --color-bg:              #F7F0E1;
  --color-surface:         #EEE3CC;
  --color-ink:             #2A2019;
  --color-ink-muted:       #6B5C4A;
  --color-accent:          #8A4A2E;
  --color-accent-strong:   #5F3018;
  --color-accent-ink:      #FBF3E4;
  --color-accent-2:        #4C7A63;  /* anchor's green — icon-fill/rule only, R1 */
  --color-rule:            #DDD0B6;  /* decorative separator only, R4 */
  --color-focus:           #5F3018;  /* reuses accent-strong */
  --color-selection-bg:    #8A4A2E;
  --color-selection-ink:   #FBF3E4;

  /* House contract completion — base.css/site.css read --color-border for
     hairlines (header rule, footer rule, hr) that are decorative separators,
     never a control boundary (R4), so it aliases the brief's own --color-rule
     rather than introducing a second hairline hue. */
  --color-border: var(--color-rule);

  /* Brief §8.1: the hero field's own border, an explicit literal in the
     brief's prose ("border: 1px solid rgba(42,32,25,0.14)") — --color-ink at
     14% opacity. Tokenised here rather than left as a raw value in site.css. */
  --color-field-border: rgba(42, 32, 25, 0.14);

  /* Brief §3.3: the hero's atmosphere gradient end-stop. Not in the §2.2
     palette table (it is a mixed tint used once, for the gradient only). */
  --color-hero-gradient-end: #E8D8BE;

  /* --- type (brief §4) ------------------------------------------------------
     Four static woff2 instances, self-hosted, house-subset. Each weight is
     its OWN declared family name (not a weight variant of one family) so the
     browser never needs to weight-match within a family that only holds one
     instance — the brief's own R5 ("font-variation-settings appears nowhere
     … weight is set with font-weight only") is safest satisfied this way. */

  --font-display:         'Bricolage Grotesque 700', 'Bricolage Grotesque Strong Fallback', 'Helvetica Neue', Arial, sans-serif;
  --font-display-regular: 'Bricolage Grotesque 400', 'Bricolage Grotesque 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-display-regular: 400;
  --font-weight-body: 400;    --font-weight-body-strong: 600;

  --text-eyebrow: clamp(0.72rem, 0.6rem + 0.4vw, 0.85rem);
  --text-h1:      clamp(1.9rem, 1.3rem + 3vw, 3.4rem);
  --text-h2:      clamp(1.5rem, 1.2rem + 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);

  /* base.css's .site-header__brand needs a size the brief's §4.5 scale does
     not name (the wordmark is house chrome, not one of the five roles in
     §4.5's table). Carried forward from the C2-winning tile's own rendered
     header mock (tiles/tile-a.html: "font-size:14px" on the wordmark row),
     the one concrete number this run has for it. */
  --text-h3: 0.875rem;

  --leading-tight: 1.10;   /* h1, h2 */
  --leading-body:  1.50;   /* eyebrow, body, small, lead, note text */
  --leading-snug:  1.50;   /* house alias — base.css's .btn needs a line-height
                               and the brief names no second body leading */
  --tracking-caps: 0.12em; /* eyebrow, section kickers */
  --tracking-tight: 0em;   /* base.css applies this to h1–h4; this family
                               carries no negative tracking (brief names none) */

  /* --- space — the house scale (brief §5 verbatim) ------------------------- */
  --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;
  /* Unmodified house scale step, one beyond the brief's stated ceiling —
     base.css's textarea.field__control needs a minimum block-size and the
     brief's §5 block does not redefine the scale past 2xl. */
  --space-3xl: 9rem;

  /* 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-2xl);   /* 96px, fixed, at every width */

  /* --- layout (brief §5) ---------------------------------------------------- */
  --layout-container: 73.75rem;                      /* 1180px, matches the tile's own .rail */
  --layout-measure:   60ch;
  --layout-gutter:    clamp(1.25rem, 6vw, 3rem);
  --layout-tap-min:   44px;
  --layout-header-height: 56px;

  /* --- hero + collage field (brief §7, §8) ----------------------------------- */
  --hero-inset-top:  14.4px;  /* bespoke, argued — brief §7 */
  --hero-gap-sm:     12px;    /* eyebrow → h1 */
  --hero-gap-lg:     18px;    /* h1 → CTA, CTA → field */
  --cta-height:      52px;
  --field-height:    220px;   /* <48rem */
  --field-height-wide: 340px; /* >=48rem, brief §8.2 */
  --plate-w: 116px; --plate-h: 76px;             /* <48rem */
  --plate-w-wide: 150px; --plate-h-wide: 98px;   /* >=48rem */
  --plate-pin-size: 10px;
  --corner-mark-min: 14px;    /* brief §8.4 ornament-minimum rule */

  /* Brief-specific geometry the §5 block leaves as prose rather than a named
     token (§8.1's stroke-width, §8.3's card radius, §8.6's mark size/gap,
     §8.2's verdigris strip height). Tokenised here so site.css carries no
     raw literal (spec §3). The strip height reuses --space-2xs (0.5rem =
     8px) exactly rather than duplicating the number. */
  --card-border-width: 1.5px;          /* brief §8.3 stroke-width */
  --card-radius: 3px;                  /* brief §8.3's one permitted non-square corner */
  --field-strip-height: var(--space-2xs);  /* brief §8.2's 8px verdigris top strip = 0.5rem */
  --corner-mark-size: 16px;            /* brief §8.6's stated mark size (min is --corner-mark-min) */
  --corner-mark-gap: 8px;              /* brief §8.6's fixed gap before heading text */
  --process-badge-size: var(--space-lg); /* 2.5rem — brief §9.5 gives no explicit size; the
                                             house space scale supplies a legible circle diameter */
  --hero-lead-measure: 32ch;  /* the C2-winning tile's own rendered lead-line measure */

  /* Brief §6.2's two-column hero inset panel, §8.3's settle-keyframe drift
     distances, and §6.1/§9.4's notes-grid column minimum — each a literal
     the brief's own prose gives, tokenised so site.css carries no raw size
     literal (spec §3). */
  --hero-field-inline-size: min(30rem, 44vw);
  --settle-drift-1: -6px;
  --settle-drift-2: -4px;
  --notes-card-min: 240px;

  /* The note cards' one stated shadow (§5.1: "No --shadow-* group beyond the
     note cards' own single stated shadow" — the shipped, static testimonial
     cards of §9.4, carried forward from the C2-winning tile's own built CSS,
     tiles/tile-a.html's .note-card rule). No other element on this site casts
     a shadow. */
  --shadow-notes: 0 6px 14px rgba(42, 32, 25, 0.08);

  /* --- radius + border. NO PILL TOKEN EXISTS. -------------------------------- */
  --radius-none:  0;
  --radius-round: 50%;   /* the pin dot and the process badges only */
  /* House contract completion — base.css's skip-link and :focus-visible ring
     read --radius-sm; this brief specifies square corners everywhere except
     the pin dot and the note card (§5.1), so it aliases --radius-none rather
     than introducing a rounded value nothing else on the site uses. */
  --radius-sm: var(--radius-none);
  --border-hairline: 1px; --border-style: solid;
  /* House default, unmodified — base.css's :focus-visible ring width. The
     brief's own N2 confirms the colour (--color-focus, 9.63:1) but states no
     separate width; every prior site in this pipeline ships 3px unchanged. */
  --border-thick: 3px;

  /* --- motion (brief §5, §11) -------------------------------------------------- */
  --duration-settle-1: 9s;
  --duration-settle-2: 11.4s;  --delay-settle-2: 1.6s;
  --duration-sway-1:   6.4s;
  --duration-sway-2:   8.1s;   --delay-sway-2: 2.1s;
  --duration-base:  300ms; --duration-slow: 600ms;
  /* House default, unmodified — the .btn hover transition (skeleton
     site.css) needs a fast timing the brief's §5 block does not restate. */
  --duration-fast: 140ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-settle: cubic-bezier(0.2, 0.7, 0.15, 1);
  --reveal-shift: 1rem; --reveal-stagger: 60ms;

  --z-field: 0; --z-atmosphere: 1; --z-treeline: 2; --z-collage: 3; --z-header: 100; --z-skip-link: 300;
}

/* --------------------------------------------------------------------------
   @font-face — self-hosted woff2 only, subset to house-tech-spec §8's
   declared safe range, font-display: swap. Four static instances, two
   families (brief §4), each its own declared family name (see the type
   comment above). unicode-range is byte-identical across all four.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Bricolage Grotesque 400';
  src: url('../assets/fonts/bricolage-grotesque-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: 'Bricolage Grotesque 700';
  src: url('../assets/fonts/bricolage-grotesque-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: 'Hanken Grotesk 400';
  src: url('../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk 600';
  src: url('../assets/fonts/hanken-grotesk-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 (spec §7/§8) — MEASURED, not guessed: the
   standard size-adjust/ascent-override/descent-override formula, computed
   with fontTools against the real shipped woff2 vs. Liberation Sans
   (verified as this environment's local('Arial') resolution). Full numbers
   in README.md. */

@font-face {
  font-family: 'Bricolage Grotesque Fallback';
  src: local('Arial'), local('Liberation Sans');
  size-adjust: 95.58%;
  ascent-override: 97.30%;
  descent-override: 28.25%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Bricolage Grotesque Strong Fallback';
  src: local('Arial Bold'), local('Liberation Sans Bold');
  size-adjust: 95.34%;
  ascent-override: 97.54%;
  descent-override: 28.32%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Hanken Grotesk Fallback';
  src: local('Arial'), local('Liberation Sans');
  size-adjust: 94.03%;
  ascent-override: 106.35%;
  descent-override: 32.22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Hanken Grotesk Strong Fallback';
  src: local('Arial'), local('Liberation Sans');
  size-adjust: 95.24%;
  ascent-override: 105.00%;
  descent-override: 31.81%;
  line-gap-override: 0%;
}