/* ==========================================================================
   tokens.css — the design brief, compiled.
   Garden Art Landscaping, Fort Collins CO.
   Source: runs/garden-art-landscaping-fort-collins-co/brief.md (APPROVED,
   C3 2026-08-26). Every value below is stated there. Nothing here was chosen
   here. THIS FILE IS THE ONLY PLACE RAW VALUES LIVE (house-tech-spec §3).
   ========================================================================== */

:root {

  /* --- Colour — brief §3.1. One deliberate mode: light. ------------------ */

  --scheme: light;

  --color-bg: #F6F1E7;                 /* parchment — page ground */
  --color-surface: #EDE6D6;            /* tinted band ground */
  --color-ink: #2B2621;                /* body/heading text */
  --color-ink-muted: #6B5E52;          /* captions, eyebrows, index labels */

  /* --color-accent is DECORATIVE / LARGE TEXT ONLY (brief §3.1's binding
     rule): the H1's italic accent word and the italic numeral marks — both
     always at or above --text-display, well above the 24px/18.66px-bold AA
     large-text floor (row 5, 4.57:1). It is NEVER used for body-sized or
     interactive text anywhere in this site's own site.css. */
  --color-accent: #A85736;             /* terracotta — decorative / large text only */

  /* --color-accent-strong is the ONLY accent shade for body-sized text,
     links, or button fills/labels (brief §3.1's binding rule, 6.31:1). */
  --color-accent-strong: #8B4429;

  /* Required house role. Text colour ON the accent-strong fill — numerically
     identical to --color-bg (brief §3.1 row 8), stated as its own token
     because that is the house-required slot name. */
  --color-accent-ink: #F6F1E7;

  /* Ornament-only — the hero hairline. Never a text colour (brief §3.1 row
     10: 2.86:1, not a text pairing). */
  --color-hairline-gold: #B8863B;

  /* Imagery-only anchor — the stems and secondary studies. Never a token used
     as running text (brief §3.1 row 9, 6.64:1, recorded for completeness). */
  --color-moss: #3E5C3F;

  /* House-required structural colours. */
  --color-border: #D8D2C4;             /* hairline dividers, header rule, field frame */

  /* :focus-visible ring colour (house-tech-spec §8; base.css's fixed rule).
     Not itemised as its own hex in brief §3.1 — derived here from the
     brief's own binding rule rather than invented: a focus ring is
     non-text UI (WCAG 1.4.11, 3:1 floor), so it draws from
     --color-accent-strong, the shade the brief already designates for every
     interactive role, at 6.31:1 against --color-bg. This site has no dark
     band, so --color-focus-on-band is not declared (tokens.css comment
     precedent: "leave it commented out on a site with no dark band"). */
  --color-focus: #8B4429;
  /* --color-focus-on-band: …; — not declared; no dark band on this site. */

  --color-selection-bg: #8B4429;
  --color-selection-ink: #F6F1E7;


  /* --- Typography — brief §3.2. Two families, three woff2. Marcellus ships
     ONE static instance (400 normal); its one italic use (the H1 accent
     word, the numeral marks) is browser-synthesized oblique on that same
     file — never a second font file (brief §3.2's correction to tile A).
     Lora ships 400 + 600, both true static instances. --- */

  --font-display: 'Marcellus', 'Marcellus Fallback', Georgia, serif;
  --font-body: 'Lora', 'Lora Fallback', Georgia, serif;
  /* Same family as display — one italic word, browser-synthesized oblique
     applied via font-style, not a second file (brief §3.2). */
  --font-emphasis: 'Marcellus', 'Marcellus Fallback', Georgia, serif;

  --font-weight-body: 400;
  --font-weight-body-strong: 600;
  --font-weight-display: 400;          /* Marcellus ships 400 only */

  /* --- Type scale — brief §3.2's fluid scale, computed at floor/ceiling. -- */

  --text-display: clamp(2.0rem, 1.3rem + 3.0vw, 3.75rem);      /* 32 → 60 */
  --text-h2: clamp(1.375rem, 1.10rem + 1.17vw, 2.125rem);       /* 22 → 34 */
  --text-lead: clamp(1.0625rem, 1.0rem + 0.27vw, 1.375rem);     /* 17 → 22 */
  --text-body: 1rem;                   /* fixed at every width, brief §3.2 */
  --text-eyebrow: 0.75rem;             /* fixed, 12px */
  --text-micro: 0.6875rem;             /* fixed, 11px */

  /* Aliases so the house skeleton's fixed base.css keeps working — no new
     scale, same values. */
  --text-hero: var(--text-display);
  --text-h3: var(--text-h2);
  --text-small: var(--text-micro);

  /* The header wordmark (brief §4.1.2: "wordmark (Marcellus, --color-accent)").
     --color-accent is decorative/large-text-only (brief §3.1's binding
     rule) — 24px fixed, not fluid, is the AA large-text floor itself (row
     5: >=24px normal, 4.57:1), so the wordmark never drifts below the size
     that licenses its own colour. Derived to satisfy the brief's own
     instruction, the same delivery-mechanical latitude as the font-fallback
     tuning above; not a new display size invented for its own sake. */
  --text-wordmark: 1.5rem;             /* 24px, fixed at every width */

  --leading-tight: 1.06;               /* h1 */
  --leading-snug: 1.2;                 /* h2, numerals */
  --leading-lead: 1.5;
  --leading-body: 1.6;
  --leading-eyebrow: 1.4;
  --leading-facts: 1.7;

  --tracking-tight: -0.01em;           /* h1 */
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;             /* eyebrows / index labels */


  /* --- Space — brief §3.3, the house scale unchanged. --------------------- */

  --space-3xs: 0.25rem;   /* 4px */
  --space-2xs: 0.5rem;    /* 8px */
  --space-xs: 0.75rem;    /* 12px */
  --space-sm: 1rem;       /* 16px */
  --space-md: 1.5rem;     /* 24px */
  --space-lg: 2.5rem;     /* 40px */
  --space-xl: 4rem;       /* 64px */
  --space-2xl: 6rem;      /* 96px */
  --space-3xl: 9rem;      /* contract token, no call site on this site */

  /* The ONE token setting space between sections (brief §3.3). */
  --section-gap: var(--space-xl);


  /* --- Layout — brief §5's arithmetic: 335px column at 375, 640px column at
     1440 — a single narrow editorial measure, not the house's wider default.
     The bands themselves are full-bleed (background colour on the section),
     .container narrows only the content within them. ---------------------- */

  --layout-container: 40rem;           /* 640px — brief §5's desktop column */
  --layout-measure: 62ch;
  --layout-gutter: clamp(1.25rem, 5vw, 3rem);   /* 20px floor, 48px ceiling */
  --layout-tap-min: 44px;

  --header-height: 3.5625rem;          /* 57px = 56px + 1px border, brief §4.1.2 */

  /* Living-hero field geometry (brief §4.1.3, §5). Mobile: intrinsic, fills
     the content column. Desktop: fixed 480px height, a deliberate desktop
     value (brief §5), not aspect-scaled. */
  --hero-field-height-lg: 30rem;       /* 480px at ≥1024 */

  /* The gold hairline ornament (brief §9): fixed 60×1px at every breakpoint,
     never resized responsively. */
  --hairline-gold-length: 3.75rem;     /* 60px */

  /* The numeral head-mark minimum (brief §9): never below eyebrow-adjacent
     scale, though the display-scale numeral never approaches it in practice. */
  --numeral-min-size: 0.9375rem;       /* ~15px */

  /* Primary CTA height, brief §4.1.3: 52px. */
  --cta-height: 3.25rem;

  /* Mobile hero field ratio — brief §5's 335x320 arithmetic table, reduced
     (67:64). Desktop uses --hero-field-height-lg (a fixed value, not a
     ratio) per the same table. */
  --hero-ratio-sm: 67 / 64;

  /* The moss stem leaf ornament (brief §8's "pure CSS transform" stems) —
     Builder-derived shape values, not itemised in the brief's token table,
     kept here rather than as inline site.css literals per the token
     contract (house-tech-spec §3). */
  --stem-leaf-w: 0.625rem;
  --stem-leaf-h: 0.375rem;
  --stem-leaf-offset: 0.5rem;
  --stem-width: 2px;


  /* --- Radius / shadow / border — brief §3.3. ----------------------------- */

  --radius-none: 0;                    /* bands, header, footer — the default */
  --radius-sm: 2px;                    /* the ONLY radius: primary CTA, hero field frame */
  /* Contract tokens, ZERO call sites on this site — no card/uniform-radius
     pattern exists here (brief §3.3's own note). */
  --radius-md: 6px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-none: none;
  /* The ONE shadow value on this site (brief §3.3) — a soft ink halo layered
     alongside base.css's fixed, AA-compliant outline ring (house-tech-spec
     §8), never replacing it. No decorative shadow on any card, band or
     button anywhere. */
  --shadow-focus: 0 0 0 3px rgba(43, 38, 33, 0.15);
  /* Contract tokens, ZERO call sites — this site has no card and no drop
     shadow of any kind beyond --shadow-focus. */
  --shadow-sm: 0 1px 2px rgb(43 38 33 / 0.06);
  --shadow-md: 0 6px 24px rgb(43 38 33 / 0.09);
  --shadow-lg: 0 24px 60px rgb(43 38 33 / 0.14);

  --border-hairline: 1px;              /* header rule, band dividers, hero field frame */
  --border-thick: 3px;                 /* base.css's fixed :focus-visible outline width */
  --border-style: solid;


  /* --- Motion — brief §3.3 / §8. Zero scroll-reveal anywhere on this site;
     no --duration-reveal token exists (brief's own deliberate omission).
     The house architecture tokens below (--duration-fast/base/slow,
     --ease-out/in-out, --reveal-shift/stagger) are kept declared because
     base.css's fixed reveal system and :focus-visible/.btn transitions read
     them — but this site places no [data-reveal] anywhere, so the reveal
     values are never exercised; --reveal-shift is 0 for the same reason. -- */

  --duration-hover: 200ms;             /* the ONLY interaction duration (brief §3.3) */
  --duration-fast: var(--duration-hover);
  --duration-base: var(--duration-hover);
  --duration-slow: var(--duration-hover);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);   /* hover/focus (brief §3.3) */
  --ease-out: var(--ease-standard);
  --ease-in-out: var(--ease-standard);

  /* The hero's three stem loops (brief §3.3, §8). */
  --ease-sway: ease-in-out;
  --duration-sway-1: 9s;
  --duration-sway-2: 12s;
  --duration-sway-3: 15s;

  --reveal-shift: 0;                   /* no reveal system in use on this site */
  --reveal-stagger: 0ms;

  /* --- Z layers ------------------------------------------------------------ */
  --z-base: 0;
  --z-header: 100;
  --z-nav-panel: 200;
  --z-skip-link: 300;
}

/* --------------------------------------------------------------------------
   @font-face — brief §3.2. Three files, two families, SIL OFL 1.1,
   self-hosted, Google Fonts. Marcellus ships exactly one static instance
   (400 normal) — no true italic exists, so the brief's one italic use is
   browser-synthesized oblique on this file. Lora ships 400 + 600, both true
   static instances.

   Metrics-matched fallbacks: computed with scripts/font-metrics.mjs against
   Gelasio (Google Fonts' own metric-compatible open substitute for Georgia —
   Georgia itself is a Microsoft core font, not freely distributable, so no
   local .ttf of it exists to measure against; Gelasio is built to Georgia's
   exact metrics for precisely this purpose). Recorded per-face below; final
   values also logged in the QA report per house-tech-spec §3.2/§8.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Marcellus Fallback';
  src: local('Georgia');
  size-adjust: 103.85%;
  ascent-override: 93.8%;
  descent-override: 26.94%;
  line-gap-override: 0%;
}

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

@font-face {
  font-family: 'Marcellus';
  src: url('../assets/fonts/marcellus-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: 'Lora';
  src: url('../assets/fonts/lora-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: 'Lora';
  src: url('../assets/fonts/lora-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;
}