/* ==========================================================================
   tokens.css — the design brief, compiled (house-tech-spec §3).
   Source: runs/df-landscapes-grand-junction-co/brief.md §5 (token block,
   verbatim), §2.3 (palette table), §4 (type), §6-§8 (layout + hero + the
   signature device geometry). Every value below is the brief's own; 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 a
   value tokenised from a literal that already appears in the brief's own
   prose — called out inline, same discipline the sibling
   mueller-lawn-and-landscaping-llc-fountain-city-wi build used for the
   identical class of gap.
   ========================================================================== */

:root {

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

  --color-bg:              #F7F8F7;
  --color-surface:         #ECEFEE;
  --color-ink:             #1B2426;
  --color-ink-muted:       #55636A;
  --color-accent:          #3D5A63;  /* flat grounds only — never the hero gradient, R2 */
  --color-accent-strong:   #253B42;
  --color-accent-ink:      #FAFBFA;
  --color-accent-2:        #8FA07A;  /* icon-fill/decorative only, never text, R1 */
  --color-rule:            #D7DCDB;  /* decorative separator only, R5 */
  --color-focus:           #253B42;  /* reuses accent-strong */
  --color-selection-bg:    #3D5A63;
  --color-selection-ink:   #FAFBFA;

  /* House contract completion — base.css/site.css read --color-border for
     hairlines (header rule, 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. A form
     field's border and a button's own edge ARE control boundaries, so
     site.css points those at --color-ink-muted instead (F3, 5.84:1),
     same discipline the mueller sibling site.css records for the identical
     gap. */
  --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(27,36,38,0.14)") — --color-ink at 14% opacity (#1B2426 = 27,36,38).
     Tokenised here rather than left as a raw value in site.css. */
  --color-field-border: rgba(27, 36, 38, 0.14);

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

  /* Brief §8.2's flat surface tint overlay laid over the atmosphere plate —
     "rgba(236,239,238,0.55)" (a semi-transparent --color-surface,
     #ECEFEE = 236,239,238). Tokenised rather than left raw. */
  --color-field-tint: rgba(236, 239, 238, 0.55);

  /* --- type (§4) ----------------------------------------------------------- */
  --font-display: 'Figtree', 'Figtree Fallback', Arial, sans-serif;
  --font-body:    'Source Sans 3', 'Source Sans 3 Fallback', 'Helvetica Neue', sans-serif;
  --font-weight-display: 700; --font-weight-display-sub: 600;
  --font-weight-body: 400; --font-weight-body-strong: 600;

  --text-eyebrow: clamp(0.72rem, 0.6rem + 0.4vw, 0.85rem);
  --text-h1:      clamp(1.7rem, 1.15rem + 2.8vw, 3.1rem);
  --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 §4's role table does not
     name (the wordmark is house chrome, not one of the §4.1 role-table
     rows). Carried 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, same precedent the mueller and
     duluth sibling briefs recorded for their own identical wordmark gap. */
  --text-h3: 0.875rem;

  /* site.css's .idx-num (services-index numeral opener, brief §9.3/§6.1
     rule 2) needs a size the §4 role table gives no token for — it states
     the numeral's WEIGHT (600, Display, §4.1's role table row 2) but not a
     size. Carried from the tile's own literal (tiles/tile-a.html: .idx-num
     font-size:1.4rem) rather than invented, tokenised per the identical
     precedent above. */
  --text-idx-num: 1.4rem;

  --leading-tight: 1.08;  /* h1, h2 — matches the tile's own h1,h2,h3 rule */
  --leading-body:  1.50;  /* eyebrow, body, small, lead */
  /* House alias — base.css's .btn needs a line-height and §4 names no
     second body leading (same alias the mueller sibling's tokens.css
     records for the identical gap). */
  --leading-snug:  1.50;
  --tracking-caps: 0.12em; /* eyebrow */
  /* 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 (same gap the mueller
     sibling's tokens.css records). */
  --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:   62ch;                           /* matches the tile's own .spec-body max-width */
  --layout-gutter:    clamp(1.25rem, 6vw, 3rem);
  --layout-tap-min:   44px;
  --layout-header-height: 56px;

  /* --- hero + field (§7, §8) ------------------------------------------------ */
  --hero-inset-top:  14.4px;   /* 0.9rem, matches tile's .hero padding */
  --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 */

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

  /* The settled horizon line, reused as every section's static head-rule
     (brief §8.5) — "3px, its full drawn width", the same thickness as the
     hero's own horizon-line rect (§8.2's SVG markup, height="3"). Tokenised
     rather than left raw. */
  --head-rule-height: 3px;

  /* The verbatim CTA-heading line's own measure — the tile's own literal
     (tiles/tile-a.html: the hero lead paragraph's own "max-width:34ch").
     Tokenised rather than left raw in site.css. */
  --hero-quote-measure: 34ch;

  /* site.css's services-index row needs a numeral column width the §4/§9.3
     role table does not name a token for. Carried from the tile's own
     literal (tiles/tile-a.html: ".idx-row{ grid-template-columns:56px 1fr }")
     and rounded to the nearest house spacing-scale step (--space-xl, 64px)
     rather than introducing a new raw px value — the numeral's own size
     (--text-idx-num above) already comes from the tile, so the column only
     needs to be wide enough to hold two digits at that size with room to
     spare. */
  --idx-num-col: var(--space-xl);

  /* --- radius + border. NO RADIUS TOKEN EXISTS ON THIS SITE. ------------------ */
  --radius-none:  0;
  /* House contract completion — base.css's skip-link and :focus-visible ring
     read --radius-sm; brief §5.1 specifies square corners everywhere on
     this site, 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, 10.2:1) but states no
     separate width; every prior site in this pipeline ships 3px unchanged. */
  --border-thick: 3px;

  /* --- motion (§11) ----------------------------------------------------------- */
  --duration-line-draw:  1.5s;   /* one-shot, no delay */
  --duration-sprig-open: 1.3s;   --delay-sprig-open: 1.4s;
  --duration-sprig-sway: 7.6s;   --delay-sprig-sway: 2.9s;
  --duration-marker-pulse: 5.8s; --delay-marker-pulse: 0.5s;
  --duration-base:  300ms; --duration-slow: 600ms;
  /* House default, unmodified — the .btn hover transition (skeleton
     site.css) needs a fast timing brief §11 does not restate. */
  --duration-fast: 140ms;
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-line: ease-out;
  --reveal-shift: 1rem; --reveal-stagger: 60ms;

  --z-atmosphere: 1; --z-field-tint: 2; --z-field-svg: 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. 2 files / 2 families (brief
   §4), unicode-range byte-identical across both.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Figtree';
  src: url('../assets/fonts/figtree-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: 'Source Sans 3';
  src: url('../assets/fonts/source-sans-3-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) — MEASURED against the real
   shipped woff2 files (fontTools, scripts/font-metrics.mjs's fontaine
   algorithm), each real face instantiated at its dominant on-screen weight
   (Figtree at 700 — the H1's own weight, the LCP-adjacent text and the
   biggest visual element above the fold; Source Sans 3 at 400 — the bulk
   body-text weight) and compared against @capsizecss/metrics@4.2.0's
   published Arial reference data (xWidthAvg, ascent, descent, lineGap,
   unitsPerEm) — no live Arial binary is installed in this build
   environment, the same gap the mueller sibling's README records and
   resolves the same way. Brief §5's token block names one font-family
   variable per role (--font-display, --font-body, no separate "-strong"
   family), so — unlike the mueller sibling's Karla, which needed two
   fallback faces because its tokens.css split body into two font-family
   variables — this site ships exactly one fallback face per family,
   pinned to the weight above rather than a second one for the other
   weight each face also carries (600 for Figtree's eyebrow/idx-num/CTA
   label; 600 for Source Sans 3's body-strong roles). Full numbers in
   README.md. */

@font-face {
  font-family: 'Figtree Fallback';
  src: local('Arial'), local('Liberation Sans');
  size-adjust: 102.21%;
  ascent-override: 92.95%;
  descent-override: 24.46%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Source Sans 3 Fallback';
  src: local('Arial'), local('Liberation Sans');
  size-adjust: 92.47%;
  ascent-override: 110.74%;
  descent-override: 43.26%;
  line-gap-override: 0%;
}