/* ==========================================================================
   tokens.css — the design brief, compiled.

   ajs-lawncare-and-landscaping-duluth-mn — brief.md v1 (approved 2026-08-26),
   family `retro-local`, archetype `poster-hero`, signature "the sign swings".
   Every value below is copied from brief.md §3.3's literal token block,
   §2.6/§2.7's type tokens, §5's layout/ornament tokens and §8's motion
   tokens. Two supplements are Builder fills, both direct restatements of a
   brief-stated exact outcome rather than a new choice, flagged where they sit:
     --header-height (56px, brief §5.6 "Header — 56px + a 1px border-block-end")
     --control-height (52px, brief §5 §I slot ③ "52px tall")
     --control-min-width (260px, brief §5.1 point 3, "inline-block, min 260px")
     --rule-section (3px, brief §5.4 "a 3px --color-ink rule", stated at every
       declared width in §5.4's own table — the brief names the value
       repeatedly in prose but does not add a token for it, so this names one)
     --text-wordmark (16px, brief §5.6 "Wordmark left, --font-display at 16px")
   ========================================================================== */

:root {

  /* --- Colour (brief §3.3). Derivation: brief §3.1 step 1 CONFIRMED EMPTY
     (no brand colour recorded at any tier) → §3.2 local-character step
     (denim-blue = Lake Superior water/Northland sky, birch-cream = paper-bark
     and cut-timber) → §3's playbook semantic anchor (sky dominant, earth
     neutral, green a sparing accent, R1). */

  --scheme: light;

  --color-bg:            #F8F1DE;   /* birch-cream — parchment ground */
  --color-surface:       #EFE4C8;   /* reserved-slot plates, section poster-head backing */
  --color-ink:           #262220;   /* barn-ink */
  --color-ink-muted:     #5C5650;

  --color-accent:        #2C5776;   /* DOMINANT — denim-blue, sky support */
  --color-accent-ink:    #FFFFFF;
  --color-accent-2:      #3D5A3F;   /* grove-green — anchor's living half,
                                        icon-fill ONLY, never a ground, control,
                                        or body text colour */
  --color-accent-2-ink:  #FFFFFF;

  --color-border:        #8C7F68;   /* functional UI border — form fields, reserved-slot frames */
  --color-rule:          #DCCFA8;   /* DECORATIVE hairlines ONLY — 1.38:1, never a functional edge */

  --color-focus:         #2C5776;
  --color-selection-bg:  #2C5776;
  --color-selection-ink: #FFFFFF;

  --color-atmos-hi:  #FDF9EE;   /* hero atmosphere radial gradient — three stops, light-mode depth */
  --color-atmos-mid: #F3E9CE;
  --color-atmos-lo:  #E9DCB8;

  /* Token-contract completeness: base.css's shared rules and the reserved
     radius steps resolve to the site's one argued radius (brief §3.3's own
     framing: "one argued value used everywhere on purpose"), so nothing is
     left undefined. Same pattern for shadow. */
  --radius-md:  var(--radius-sm);
  --radius-lg:  var(--radius-sm);
  --radius-pill: var(--radius-sm);
  --shadow-sm:  var(--shadow-none);
  --shadow-md:  var(--shadow-none);
  --shadow-lg:  var(--shadow-none);

  /* --- Typography (brief §2). Two families, three static woff2 instances —
     under design-rules §5's ceiling of four. Abril Fatface: SIL OFL 1.1,
     TypeTogether — watch-listed, justified at brief §2.1. Karla: SIL OFL 1.1,
     Jonathan Pinhorn/Huerta Tipográfica — assets/fonts/OFL.txt carries both
     copyright notices. No font-variation-settings anywhere (brief §2.3): two
     static instances, no variable axes. */

  --font-display:      'Abril Fatface', 'Abril Fatface Fallback', Georgia, 'Times New Roman', serif;
  --font-body:         'Karla', 'Karla Fallback', 'Segoe UI', Arial, sans-serif;
  --font-body-strong:  'Karla', 'Karla Bold Fallback', 'Segoe UI', Arial, sans-serif;
  --font-weight-display: 400;
  --font-weight-body:     400;
  --font-weight-body-strong: 600;

  /* --- Type scale — computed across its full range, brief §2.7 ----------- */

  --text-eyebrow: clamp(0.72rem, 0.6rem + 0.4vw, 0.85rem);
  --text-h1:      clamp(2.2rem, 1.5rem + 3.4vw, 4.2rem);
  --text-h2:      clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  --text-lead:    clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --text-body:    clamp(1rem, 0.94rem + 0.3vw, 1.0625rem);
  --text-small:   clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);

  --leading-tight: 1.08;  --leading-snug: 1.28;  --leading-body: 1.55;  --leading-caps: 1.45;

  --tracking-display: -0.01em;  --tracking-normal: 0em;  --tracking-caps: 0.14em;
  /* base.css's shared h1–h4 rule reads --tracking-tight; every element that
     rule reaches on this site (h1, h2 — no h3/h4 exist here) IS display type,
     so this is a direct alias rather than a repurposed role. */
  --tracking-tight: var(--tracking-display);

  /* --- Space — house scale, brief §3.3. No --space-3xl on this site; the one
     skeleton rule that referenced it — the textarea's min-height — is driven
     by its `rows` attribute instead, so nothing needs it. */

  --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;

  --section-gap:      var(--space-xl);   /* = 64px FIXED at every declared width — brief §5.5 */
  --layout-container: 72rem;             /* 1152px outer box */
  --layout-gutter:    1rem;              /* 16px <48rem → 2.5rem (40px) ≥48rem, INSIDE the container */
  --layout-measure:   38rem;             /* 608px prose cap */
  --h1-max:           42rem;             /* 672px — the display column, brief §5.1 */
  --layout-tap-min:   44px;
  --hero-field-ratio: 3 / 2;             /* → 12 / 5 at ≥48rem */

  /* Sticky stack = expiry 44 + header 56 + 1px border = 101px (brief §5.6). */
  --header-height:      3.5rem;    /* 56px, fixed at every width — brief §5.6 */
  --text-wordmark:      1rem;      /* 16px — brief §5.6 "Wordmark left ... at 16px" */
  --control-height:     3.25rem;   /* 52px — brief §5 §I slot ③ "52px tall" */
  --control-min-width:  16.25rem;  /* 260px — brief §5.1 point 3, inline-block floor at ≥48rem */
  --reserved-height:    8.25rem;   /* ~132px @375 — brief §6 §IV/§V reserved-slot plate */

  --mark-size: 28px;                     /* the sign-silhouette corner mark → 36px at ≥45.5rem */
  --radius-sm: 2px;                      /* the ONE radius on this site — every framed edge */
  --shadow-none: none;                   /* the ONE shadow token — no drop shadow anywhere */
  --border-hairline: 1px;  --border-frame: 2px;  --border-style: solid;
  --border-thick: var(--border-frame);   /* house focus-ring weight */
  --rule-section: 3px;                   /* the poster-head rule — never thins, brief §5.4 */

  --duration-fast: 160ms;  --duration-base: 300ms;  --duration-slow: 520ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-shift: 0.75rem;  --reveal-stagger: 70ms;
  --rm-haze-opacity: 0.36;   /* the sign/chime/swan overlay's resting silhouette
                                opacity (brief §8.3: "flat ink silhouettes at
                                partial opacity") — the one opacity token the
                                brief supplies for this device */

  /* Ambient signature motion, hero field only (brief §8.2): three independent,
     non-synchronised loops. 6.5s / 8.5s / 9s share no small common period
     (13:17:18 in half-second units). */
  --duration-sign:  6.5s;
  --duration-chime: 8.5s;
  --duration-swan:  9s;
  --delay-chime: -1.2s;
  --delay-swan:  -2.4s;

  --z-base: 0; --z-header: 100; --z-nav-panel: 200; --z-skip-link: 300;
}

/* Declared breakpoints — brief §2.7/§5.4: 45.5rem (728px, the ornament step)
   and 48rem (768px, layout). No other breakpoint appears in this file or in
   site.css (brief §5.2's table). */

@media (min-width: 45.5rem) {
  :root {
    --mark-size: 36px;
  }
}

@media (min-width: 48rem) {
  :root {
    --layout-gutter:    2.5rem;
    --hero-field-ratio: 12 / 5;
    --reserved-height:  9.25rem;   /* ~148px @≥48rem */
  }
}

/* --------------------------------------------------------------------------
   @font-face — self-hosted woff2, latin subset, static instances only.
   Abril Fatface: SIL OFL 1.1, TypeTogether (assets/fonts/OFL.txt). Karla:
   SIL OFL 1.1, Jonathan Pinhorn/Huerta Tipográfica (assets/fonts/OFL.txt).
   Subset to the house declared range, identical on all three faces
   (house-tech-spec §8; brief §2.5). Coverage gap, all three faces alike:
   U+2010, U+2011, U+2012, U+2015, U+2032, U+2033 are declared and absent from
   all three source faces — none render in this site's copy (U+00B7 and the
   curly apostrophe U+2019, the non-ASCII characters this copy actually uses,
   are carried by every face).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Abril Fatface';
  src: url('../assets/fonts/abril-fatface-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: 'Karla';
  src: url('../assets/fonts/karla-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: 'Karla';
  src: url('../assets/fonts/karla-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 (house-tech-spec §8, brief §2.4). Donors:
   Gelasio (Georgia's own metric-compatible open-source stand-in, used as the
   measurement proxy since no Georgia binary exists to read; the CSS still
   names local('Georgia') first, matching every other browser's real system
   font), Arial (both Karla instances — reused unchanged from
   all-pro-lawn-service-boise-id, byte-identical Karla files subset to the same
   declared range, so the same override numbers apply). size-adjust /
   ascent-override / descent-override / line-gap-override computed by
   scripts/font-metrics.mjs from the real shipped instances' own OS/2 + hhea
   metrics (the `fontaine` algorithm — xAvgCharWidth ratio drives size-adjust;
   ascent/descent scale with it). Verified against Lighthouse CLS — see
   README.md. */

@font-face {
  font-family: 'Abril Fatface Fallback';
  src: local('Georgia');
  font-weight: 400;
  font-style: normal;
  size-adjust: 103.55%;
  ascent-override: 102.17%;
  descent-override: 28.10%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Karla Fallback';
  src: local('Arial');
  font-weight: 400;
  font-style: normal;
  size-adjust: 117.88%;
  ascent-override: 77.79%;
  descent-override: 21.38%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Karla Bold Fallback';
  src: local('Arial Bold'), local('Arial');
  font-weight: 600;
  font-style: normal;
  size-adjust: 110.58%;
  ascent-override: 82.93%;
  descent-override: 22.79%;
  line-gap-override: 0%;
}