/* ==========================================================================
   tokens.css — the design brief, compiled (house-tech-spec §3).
   Source: runs/eagle-landscaping-grand-junction-co/brief.md — §2 (type),
   §3 (palette), §4.2/§4.3 (layout + field-notes geometry), §7 (motion).
   Every value below traces to a brief section cited inline; where base.css/
   site.css need a token the brief's own role table does not name, the value
   is either the unmodified house default (infrastructure, not an aesthetic
   choice) or a value tokenised from a literal already in the brief's own
   prose/tile — called out inline, same discipline the df-landscapes and
   mueller sibling builds record for the identical class of gap.
   ========================================================================== */

:root {

  /* --- Colour (brief §3.2) ------------------------------------------------- */
  --scheme: light;

  --color-bg:            #FAF6EE;  /* warm bone-white ground */
  --color-surface:       #F0E9DB;  /* Field Notes / FAQ bands, form field grounds */
  --color-ink:           #1B1F24;  /* cool near-black */
  --color-ink-muted:     #5B6169;  /* secondary text, eyebrow */
  --color-accent:        #2E6E8E;  /* desert-sky — dominant hue */
  --color-accent-ink:    #FAFBFA;  /* type on the accent-strong fill */
  --color-accent-strong: #1F4A5E;  /* primary CTA fill, italic accent-word colour */
  --color-accent-hover:  #16394A;  /* control :hover/:active ground */
  --color-accent-2:      #7C9A6B;  /* muted sage — icon-fill ONLY, never text (R6, 2.91:1) */
  --color-border:        #DDD4C0;  /* decorative hairlines ONLY (R5) */
  --color-focus:         #2E6E8E;
  --color-selection-bg:  #2E6E8E;
  --color-selection-ink: #FAF6EE;

  /* Hero atmosphere gradient stops, named so contrast is computed against the
     ground's actual extremes rather than a flat token (brief §3.2, §3.4). */
  --color-atmos-hi: #FAF6EE;  /* == --color-bg */
  --color-atmos-lo: #EDE4D2;  /* the gradient's darkest named stop */

  /* Field ground for the hero's decorative SVG (brief §3.5) — opaque sibling
     ground, never a gradient. Equal to --color-surface; a distinct name
     because §3.5 gives it one. */
  --color-field-bg: #F0E9DB;

  /* R5's one named exception: the two field-note cards carry a shadow (the
     "pinned note lifted off the page" cue) — the brief's own literal,
     rgba(27,31,36,0.08) = --color-ink at 8% alpha. Tokenised rather than
     left as a raw value in site.css. */
  --shadow-card: 0 6px 14px rgba(27, 31, 36, 0.08);

  /* The hero field's own border, an explicit literal in the C2-locked tile
     (tiles/tile-b.html: "border:1px solid rgba(27,31,36,0.14)") —
     --color-ink at 14% alpha. Tokenised rather than left raw. */
  --color-field-border: rgba(27, 31, 36, 0.14);

  /* --- Typography (brief §2) ------------------------------------------------ */
  --font-display: 'Crimson Pro', 'Crimson Pro Fallback', Georgia, 'Times New Roman', serif;
  --font-body:    'Work Sans', 'Work Sans Fallback', Arial, 'Helvetica Neue', sans-serif;

  --font-weight-display:  600;
  --font-weight-emphasis: 500;  /* italic only, explicitly set — never inherited (R "correction") */
  --font-weight-body:        400;
  --font-weight-body-strong: 600;

  /* --- Fluid type scale, computed across its range (brief §2.7) ------------ */
  --text-h1:      clamp(1.8rem, 1.2rem + 3.0vw, 3.3rem);
  --text-h2:      clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  --text-body:    clamp(1rem, 0.94rem + 0.3vw, 1.0625rem);
  --text-eyebrow: clamp(0.72rem, 0.6rem + 0.4vw, 0.85rem);
  --text-small:   clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);

  /* base.css's .site-header__brand needs a size the brief's §2 role table
     does not name (the wordmark is house chrome, not one of §2.6's rows).
     Carried from the C2-winning tile's own rendered header mock
     (tiles/tile-b.html: "font-size:15px" on the wordmark span), the same
     tile-literal precedent the df-landscapes/mueller/duluth sibling briefs
     record for their own identical wordmark gap. */
  --text-h3: 0.9375rem;

  --leading-tight: 1.08;  /* h1 only, brief §2.7 */
  --leading-h2:    1.14;  /* h2, h3, brief §2.7 */
  --leading-body:  1.5;   /* prose, cards, form, brief §2.7 */
  --leading-caps:  1.4;   /* every caps label, brief §2.7 */
  /* House alias — base.css's .btn needs a line-height and §2.7 names no
     second body leading; same alias the df-landscapes sibling's tokens.css
     records for the identical gap. */
  --leading-snug: 1.4;

  --tracking-caps:  0.12em;  /* eyebrow, section eyebrows, card tags, brief §2.7 */
  --tracking-tight: 0.02em;  /* footer meta ONLY, brief §2.7 — see site.css's
                                 explicit h1/h2/h3 reset: base.css's own h1-h4
                                 rule also reads this token, but the brief
                                 scopes its value to footer meta alone and
                                 states no heading tracking at all, so site.css
                                 resets heading letter-spacing to normal
                                 rather than silently inheriting a value the
                                 brief never assigned to that role. */

  /* --- Space — the house scale (unchanged; brief §4.2's own px values are
     exact house-scale steps: 16/24/40/64/96px = sm/md/lg/xl/2xl) ----------- */
  --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;

  /* design-rules §7.1's ONE inter-section token. Resolves to --space-xl
     (64px) below 768, --space-2xl (96px) at >=768 (brief §4.2). Two call
     sites only: .section's padding-block, and the hero's padding-block-end. */
  --section-gap: var(--space-xl);

  /* --- Layout (brief §4.2) --------------------------------------------------- */
  --layout-container: 72rem;   /* 1152px — brief's own "container outer min(vw,1152)" */
  --layout-measure:   62ch;    /* house default; brief names no override */
  --layout-gutter:    1rem;    /* 16px below 768; overridden to 2.5rem (40px) at
                                   >=48em below — brief's own stated 767->768
                                   discontinuity, not a fluid clamp() */
  --layout-tap-min:      44px;
  --layout-header-height: 56px;  /* brief §4.4 step 1: fixed at every breakpoint */
  --cta-height: 3.25rem;  /* 52px, brief §5's primary-CTA height at every breakpoint */

  /* --- Field-notes signature geometry (brief §4.3) --------------------------
     card_width=260px fixed >=768; gap=48px (n2.left = 260+48 = 308); vertical
     offset = 64px (== --space-xl, reused rather than a new token). 48px is
     not a house scale step, so it is its own named token. */
  --field-note-card-width: 16.25rem;  /* 260px */
  --field-note-gap:        3rem;      /* 48px */
  --note-card-max-width:   25rem;     /* 400px, brief §4.3's stated mobile max-width */

  /* Card-settle keyframe start offsets — the C2-verified tile's own literal
     drift distances (tiles/tile-b.html cardSettle1/cardSettle2), tokenised
     so the @keyframes rule carries no raw size literal. */
  --card-1-drift-x: -1.5rem;  --card-1-drift-y: -0.875rem;
  --card-2-drift-x: 1.25rem;  --card-2-drift-y: -0.625rem;

  /* --- Radius / shadow / border — --radius:0 site-wide, no drop shadow
     except the one named field-note-card exception above (brief §3.2 R5) -- */
  --radius-none: 0;
  --radius-sm: var(--radius-none);
  --shadow-none: none;
  --border-hairline: 1px;
  --border-thick: 3px;   /* house default, unmodified — :focus-visible ring width */
  --border-style: solid;

  /* --- Motion (brief §4.3, §7) -----------------------------------------------
     Card settle timings carried unchanged from the C2-verified tile
     (tiles/tile-b.html), which the brief's §7/§4.3 prose describes without
     re-stating exact seconds — "true one-shot... no loop-point jump" is the
     tile's own cardSettle1/cardSettle2 pair. Pin-sway and sprig-sway timings
     ARE brief literals (§4.3/§7: 6.8s/1.7s pin; 8.4s/2.2s sprig), matching
     the tile's own numbers exactly. The 0.6s one-shot sprig-open duration is
     a brief addition beyond the tile's own CSS (tile only sways the sprig;
     brief §4.3/§7 adds the unfurl) — built as a one-shot rotate+scale+opacity
     open, the same shape design-rules §0's ref-001 physics uses elsewhere in
     this pipeline for an "unfurl", never a new visual idea. */
  --duration-card-1: 1.2s;  --ease-settle: cubic-bezier(0.2, 0.8, 0.3, 1);
  --duration-card-2: 1.4s;  --delay-card-2: 0.25s;
  --duration-pin-sway: 6.8s;  --delay-pin-sway: 1.7s;
  --duration-sprig-open: 0.6s;
  --duration-sprig-sway: 8.4s;  --delay-sprig-sway: 2.2s;

  --duration-base: 300ms; --duration-slow: 600ms;
  /* House default, unmodified — the .btn hover transition (skeleton
     site.css) needs a fast timing the brief does not restate. */
  --duration-fast: 140ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --reveal-shift: 1rem; --reveal-stagger: 80ms;  /* brief §7: "staggered 80ms per item" */

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

/* Gutter's stated 767->768 discontinuity (brief §4.2) — not a fluid clamp(). */
@media (min-width: 48em) {
  :root {
    --layout-gutter: var(--space-lg); /* 40px */
    --section-gap: var(--space-2xl);  /* 96px */
  }
}

/* --------------------------------------------------------------------------
   @font-face — self-hosted woff2 only, subset to house-tech-spec §8's
   declared safe range, font-display: swap. 2 families / 4 files (brief §2.1),
   at design-rules §5's ceiling. unicode-range byte-identical on every face
   (brief §2.4).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Crimson Pro';
  src: url('../assets/fonts/crimson-pro-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: 'Crimson Pro';
  src: url('../assets/fonts/crimson-pro-italic-500-latin.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: 'Work Sans';
  src: url('../assets/fonts/work-sans-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: 'Work Sans';
  src: url('../assets/fonts/work-sans-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;
}

/* Metrics-matched fallbacks (brief §2.5) — MEASURED, not guessed: fontTools
   (scripts/font-metrics.mjs's fontaine algorithm) reads each real shipped
   face and compares it to @capsizecss/metrics@4.2.0's published Georgia/
   Arial data (no live Georgia/Arial binary in this build environment).
   Brief §2.5 names FOUR fallback blocks, one per instance; full numbers in
   README.md. local('Georgia Italic') is named first on the italic fallback
   — local('Georgia') under font-style:italic synthesises an oblique whose
   advance widths do not match a drawn italic. */

@font-face {
  font-family: 'Crimson Pro Fallback';
  src: local('Georgia');
  font-weight: 600;
  font-style: normal;
  size-adjust: 91.66%;
  ascent-override: 97.80%;
  descent-override: 23.44%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Crimson Pro Fallback';
  src: local('Georgia Italic'), local('Georgia');
  font-weight: 500;
  font-style: italic;
  size-adjust: 83.33%;
  ascent-override: 107.58%;
  descent-override: 25.78%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Work Sans Fallback';
  src: local('Arial');
  font-weight: 400;
  font-style: normal;
  size-adjust: 111.39%;
  ascent-override: 83.49%;
  descent-override: 21.81%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Work Sans Fallback';
  src: local('Arial Bold'), local('Arial');
  font-weight: 600;
  font-style: normal;
  size-adjust: 111.24%;
  ascent-override: 83.60%;
  descent-override: 21.84%;
  line-gap-override: 0%;
}