/* ==========================================================================
   tokens.css — the design brief, compiled (house-tech-spec §3).
   Source: runs/mueller-lawn-and-landscaping-llc-fountain-city-wi/brief.md §5
   (token block, verbatim), §2.3 (palette table), §4 (type), §7–§8 (hero +
   signature device geometry). Every value is the brief's; where base.css/
   site.css need a token §5 doesn't name, it is either the unmodified house
   default (infrastructure, not an aesthetic choice) or an alias onto an
   already contrast-verified brief value — called out inline, same discipline
   as the sibling `duluth-lawn-care-duluth-mn` build.
   ========================================================================== */

:root {

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

  --color-bg:              #F8F1E4;
  --color-surface:         #EFE4CF;
  --color-ink:             #2E2418;
  --color-ink-muted:       #6E5B44;
  --color-accent:          #9A5A28;  /* flat grounds only — never the hero gradient, R2 */
  --color-accent-strong:   #6E3E16;
  --color-accent-ink:      #FBF4E7;
  --color-accent-2:        #5C7A52;  /* icon-fill/decorative only, never text, R1 */
  --color-rule:            #DDD0B3;  /* decorative separator only, R5 */
  --color-focus:           #6E3E16;  /* reuses accent-strong */
  --color-selection-bg:    #9A5A28;
  --color-selection-ink:   #FBF4E7;

  /* House contract completion — base.css/site.css read --color-border for
     hairlines (header rule, nav-toggle border, field border, footer rule)
     that are decorative separators, never a control boundary (R5), so it
     aliases the brief's own --color-rule rather than introducing a second
     hairline hue (same discipline as duluth-lawn-care-duluth-mn §2.2). */
  --color-border: var(--color-rule);

  /* Brief §8.1: the hero field's own border, an explicit literal in the
     brief's prose ("border: var(--border-hairline) var(--border-style)
     rgba(46,36,24,0.14)") — --color-ink at 14% opacity (#2E2418 = 46,36,24).
     Tokenised here rather than left as a raw value in site.css. */
  --color-field-border: rgba(46, 36, 24, 0.14);

  /* Brief §3.3: the hero's atmosphere gradient end-stop, an explicit literal
     in the brief's own gradient declaration ("linear-gradient(165deg,
     #F8F1E4 0%, #ECE0C8 100%)"). Not in the §2.3 palette table — a mixed
     tint used once, for the gradient only. */
  --color-hero-gradient-end: #ECE0C8;

  /* --- type (brief §4) ------------------------------------------------------
     3 woff2 files, 2 families: Lora variable 500–700 (upright, one file),
     Lora Italic 500 (static, one file), Karla variable 400–600 (one file).
     Each instance keeps its brief-given family name so weight is set with
     font-weight only, never font-variation-settings (R6). */

  --font-display:         'Lora', 'Lora Fallback', Georgia, serif;
  --font-display-italic:  'Lora Italic', 'Lora Italic Fallback', 'Georgia Italic', serif;
  --font-body:             'Karla', 'Karla Fallback', 'Helvetica Neue', sans-serif;
  --font-body-strong:      'Karla', 'Karla Strong Fallback', 'Helvetica Neue', sans-serif;

  --font-weight-display: 700; --font-weight-display-sub: 600; --font-weight-quote: 500;
  --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 scale does not
     name (the wordmark is house chrome, not one of the §4.2 role-table
     rows). Carried forward from the C2-winning tile's own rendered header
     mock (tiles/tile-b.html: "font-size:14px" on the wordmark row), the one
     concrete number this run has for it — same precedent
     duluth-lawn-care-duluth-mn's brief recorded for its own wordmark. */
  --text-h3: 0.875rem;

  --leading-tight: 1.10;   /* h1, h2 */
  --leading-body:  1.50;   /* eyebrow, body, small, lead */
  /* House alias — base.css's .btn needs a line-height and the brief names no
     second body leading (same alias duluth-lawn-care-duluth-mn's tokens.css
     records for the identical gap). */
  --leading-snug:  1.50;
  --tracking-caps: 0.12em; /* eyebrow, section kickers */
  /* House default, unmodified — base.css applies this to h1–h4; brief §4
     names no negative tracking for this face pair. */
  --tracking-tight: 0em;

  /* --- 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 brief
     §5 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 --------------------------------------------------------------- */
  --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 + ledger field (§7, §8) ------------------------------------------ */
  --hero-inset-top:  14.4px;
  --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, §6.2 */
  --ledger-mark-size: 20px;
  --ledger-mark-min:  16px;   /* §5's ornament-minimum rule, §8.6 */
  --radius-ledger-page: 3px;  /* the ONE permitted non-square corner — a paper ledger page, not a UI card, §5.1 */

  /* §8.6's own literal geometry for the static ledger-mark's check glyph
     ("border-left + border-bottom, both var(--color-accent), 2px" — the
     tile's own .ledger-mark::after construction, "reproduced exactly").
     Tokenised here rather than left as raw px in site.css. */
  --ledger-mark-border:    2px;
  --ledger-mark-check-x:   4px;
  --ledger-mark-check-y:   2px;
  --ledger-mark-check-w:   9px;
  --ledger-mark-check-h:   5px;
  --ledger-mark-valign:    -4px;
  --ledger-mark-gap:       var(--space-2xs);

  /* Brief §6.2's two-column hero inset panel — "inline-size: min(30rem,
     44vw)" is a literal in the brief's own prose. Tokenised so site.css
     carries no raw size literal (spec §3), same precedent
     duluth-lawn-care-duluth-mn's tokens.css records for the identical value. */
  --hero-field-inline-size: min(30rem, 44vw);

  /* --- radius + border. -------------------------------------------------------
     §5.1 states "no --radius-* value above the ledger page's own 3px" and
     "corners are square everywhere else" — but §9.5 explicitly calls the
     process counters "plain Arabic circle badges," which only a 50% radius
     can render. Read together rather than as a contradiction: §5.1's rule
     is aimed at cards/buttons/decorative UI (the ledger-stack's own
     hand-built register), and a numeral badge is neither — the same gap
     duluth-lawn-care-duluth-mn's sibling brief left open for its own pin
     dot and process badges, resolved there with the identical token,
     scoped the same way. Flagged in README rather than silently assumed. */
  --radius-none:  0;
  --radius-round: 50%;   /* the process badges only, §9.5 */
  /* House contract completion — base.css's skip-link and :focus-visible ring
     read --radius-sm; brief §5.1 specifies square corners everywhere except
     the ledger page's own 3px, 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. Brief
     §3's N2 confirms the colour (--color-focus, 7.90:1) but states no
     separate width; every prior site in this pipeline ships 3px unchanged. */
  --border-thick: 3px;

  /* --- motion (§11) ----------------------------------------------------------- */
  --duration-check-draw: 1.7s;   /* one-shot, no delay */
  --duration-sprig-sway: 6.8s;   --delay-sprig-sway: 2.4s;
  --duration-scoop-tip:  9.3s;   --delay-scoop-tip: 4s;
  --duration-base:  300ms; --duration-slow: 600ms;
  /* House default, unmodified — the .btn hover transition (skeleton
     site.css) needs a fast timing brief §5 does not restate. */
  --duration-fast: 140ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-check:  ease-out;
  --reveal-shift: 1rem; --reveal-stagger: 60ms;

  --z-atmosphere: 1; --z-ledger-page: 2; --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. 3 files / 2 families (brief §4),
   unicode-range byte-identical across all three.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Lora';
  src: url('../assets/fonts/lora-var.woff2') format('woff2');
  font-weight: 500 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: 'Lora Italic';
  src: url('../assets/fonts/lora-italic-500.woff2') format('woff2');
  font-weight: 500;
  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: 'Karla';
  src: url('../assets/fonts/karla-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;
}

/* Metrics-matched fallbacks (spec §7/§8, brief §4.3) — MEASURED against the
   real shipped woff2 files (fontTools, `scripts/font-metrics.mjs`'s fontaine
   algorithm), each real face instantiated at its on-screen weight (Lora at
   700 — the H1/CTA-adjacent weight, first paint; Karla at 400 and 600) and
   compared against `@capsizecss/metrics@4.2.0`'s published Georgia/Arial
   reference data — no live Georgia/Arial binary is installed in this build
   environment, the same gap `moores-landscaping-knoxville-tn`'s README
   records and resolves the same way. Full numbers in README.md. */

@font-face {
  font-family: 'Lora Fallback';
  src: local('Georgia');
  size-adjust: 106.69%;
  ascent-override: 94.29%;
  descent-override: 25.68%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Lora Italic Fallback';
  src: local('Georgia Italic'), local('Georgia');
  size-adjust: 98.91%;
  ascent-override: 101.71%;
  descent-override: 27.70%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Karla Fallback';
  src: local('Arial'), local('Liberation Sans');
  size-adjust: 101.69%;
  ascent-override: 90.18%;
  descent-override: 24.78%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Karla Strong Fallback';
  src: local('Arial Bold'), local('Liberation Sans Bold');
  size-adjust: 97.52%;
  ascent-override: 94.03%;
  descent-override: 25.84%;
  line-gap-override: 0%;
}