/* ==========================================================================
   tokens.css — Lewis Property Maintenance, Champaign IL. Source: brief.md
   §2 (palette, type, fluid scale, container, ticket-and-satellite geometry).
   Archetype: ledger-stack. Family: retro-local. Palette: chore-yellow /
   parchment-oat / light. Every value below traces to brief §2.3-§2.8 or the
   house defaults the brief did not override; nothing improvised
   (house-tech-spec §3).
   ========================================================================== */

:root {

  /* --- Colour --------------------------------------------------------------
     brief §2.3. Step 1 (real-world colour) is VOID — no brand_color at any
     usable tier (dossier §4.5, brief §2.1). Step 2/3: Champaign-Urbana
     small-city register + playbook's retro-local opening (brief §2.1). */

  --scheme: light;

  --color-bg: #F3E8C9;                /* page ground — parchment-oat */
  --color-surface: #EAD9A9;           /* ticket/card stock — ledger rows, form panel */
  --color-ink: #23262B;               /* charcoal-denim — body + heading text */
  --color-ink-muted: #54585F;         /* secondary text — 5.85:1 on bg */
  --color-accent: #D9A419;            /* chore-yellow — FILL/GRAPHIC ROLE ONLY, never text (brief §2.4) */
  --color-accent-ink: #23262B;        /* dark ink on accent — 6.70:1 */

  /* House-required structural colours */
  --color-border: #CBB877;            /* decorative hairlines only — 1.61:1, ornamental (brief §2.4) */

  /* Control boundary, WCAG 1.4.11: >=3:1 against bg AND surface (brief §2.3
     reuses --color-ink-muted's hex rather than a fifth literal). */
  --color-border-strong: #54585F;

  --color-focus: #23262B;             /* :focus-visible — 12.43:1 / 10.84:1. One ring
                                          colour suffices site-wide: no dark band exists
                                          on this site (brief §2.3). */

  --color-selection-bg: #23262B;
  --color-selection-ink: #F3E8C9;

  /* --- Typography ------------------------------------------------------------
     brief §2.5. Yeseva One (display, 400 only) + Karla (body, 400/700), both
     static instances, OFL, self-hosted. Metrics-matched fallback faces
     declared below (house-tech-spec §7/§8) so font-display: swap costs no
     CLS; each is named ahead of the terminal system fallback the brief states
     literally (Georgia / Arial). */

  --font-display: 'Yeseva One', 'Yeseva One Fallback', Georgia, serif;
  --font-body: 'Karla', 'Karla Fallback', Arial, sans-serif;

  --font-weight-body: 400;
  --font-weight-body-strong: 700;
  --font-weight-display: 400;         /* Yeseva One ships one weight only (brief §2.5) */

  /* --- Type scale ------------------------------------------------------------
     brief §2.6, computed at floor/375/414/768/1024/ceiling in the brief
     itself. Token NAMES are the brief's own (§2.6), not the skeleton's. */

  --text-h1: clamp(2.2rem, 1.7rem + 2.4vw, 3.7rem);     /* hero display */
  --text-h2: clamp(1.55rem, 1.25rem + 1.4vw, 2.3rem);   /* section heads */
  --text-eyebrow: clamp(0.78rem, 0.72rem + 0.28vw, 0.92rem); /* chips/labels */
  --text-body: clamp(1rem, 0.96rem + 0.16vw, 1.08rem);

  /* Fixed tokens (brief §2.6) — state the same number everywhere. */
  --text-lead: 0.95rem;    /* 15.2px — hero lead line */
  --text-small: 0.86rem;   /* 13.76px — ledger row city notes, hero facts strip, nav links */
  --text-micro: 0.72rem;   /* 11.52px — footer fine print only */

  /* Header wordmark (Karla 700, copy.md §3) — not covered by brief §2.6's
     four scale steps, so it reuses --text-lead rather than inventing a new
     literal size (design-rules §5: reuse before inventing). */
  --text-brand: var(--text-lead);

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-body: 1.6;

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;

  /* --- Space -------------------------------------------------------------
     House scale, unchanged — brief argues no override. */

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

  --section-gap: var(--space-xl); /* brief §3: 64px, fixed at every breakpoint */

  /* --- Layout ------------------------------------------------------------
     brief §2.7. --container-pad and --hero-col-max are the brief's own
     named tokens; --layout-container/measure/gutter/tap-min are house
     defaults the brief does not override (used by non-hero sections). */

  --layout-container: 72rem;
  --layout-measure: 62ch;
  --layout-gutter: clamp(1.25rem, 5vw, 3rem);
  --layout-tap-min: 44px;

  --container-pad: clamp(1rem, 4vw, 2.75rem);  /* floor 16px, ceiling 44px */
  --hero-col-max: 40rem;                       /* 640px — the ledger-stack's single content column cap */

  /* First-screen arithmetic (brief §3.2's target stack) — exact values the
     brief computed, not house scale steps, so each is its own literal here
     rather than borrowed from a step that lands on a different number. */
  --hero-pad-top: 1.1rem;      /* 17.6px */
  --hero-gap-sm: 0.6rem;       /* 9.6px — eyebrow -> H1 */
  --hero-gap-lg: 1.2rem;       /* 19.2px — H1 -> CTA, and field -> lead */
  --hero-gap-md: 0.8rem;       /* 12.8px — lead -> facts */
  --hero-pad-bottom: 1.6rem;   /* 25.6px */
  --leading-lead: 1.5;         /* brief §3.2: hero lead line leading, distinct from the house scale */

  /* --- Ticket-and-satellite system (brief §2.8): fixed px at every
     breakpoint — the satellites are fixed-pixel assets that do not grow
     with the column, and the 1.2deg rotation never needs to reduce. */

  --ticket-rotation: -1.2deg;
  --ticket-height: 170px;
  --ticket-clearance-top: 40px;
  --ticket-clearance-bottom: 40px;

  /* Satellite geometry. Key-tag 30px, pencil 40px (brief §2.8's own "30px
     and 40px wide" pair) — pencil is the physically longer object, so the
     wider asset maps to it. Heights are each asset's own intrinsic ratio
     (the <img> width/height attributes), not a second literal here. */
  --keytag-w: 30px;
  --keytag-offset-top: -22px;    /* brief §2.8: protrudes 22px above the ticket */
  --pencil-w: 40px;
  --pencil-offset-bottom: 16px;  /* brief §2.8: 16px gap before the pencil begins */

  /* Stamp's settled diameter — not stated directly by brief §2.8 (only its
     scale/opacity curve is), sized against the 170px ticket height. */
  --stamp-d: 5rem; /* 80px */

  /* --- Radius / shadow / border -----------------------------------------
     House defaults — brief argues no override. */

  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgb(35 38 43 / 0.06);
  --shadow-md: 0 6px 24px rgb(35 38 43 / 0.09);
  --shadow-lg: 0 24px 60px rgb(35 38 43 / 0.14);

  --border-hairline: 1px;
  --border-thick: 3px;
  --border-style: solid;
  --border-dashed: dashed;             /* header's dashed bottom rule (brief §3.1) */
  --border-header: 2px;                /* dashed rule weight — brief §3.1's 52+2=54px chrome math */
  --chrome-header: 3.375rem;           /* 54px — 52px content + 2px dashed rule (brief §3.1, §3.2) */

  /* --- Motion --------------------------------------------------------------
     House reveal tokens, unchanged (brief §5: standard reveals elsewhere use
     these as-is). base.css collapses every duration to ~0 under
     prefers-reduced-motion: reduce. */

  --duration-fast: 140ms;
  --duration-base: 320ms;
  --duration-slow: 640ms;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-linear: linear;

  --reveal-shift: 1.25rem;
  --reveal-stagger: 90ms;

  /* "The stamp lands" — brief §5's four independent hero timings. No two
     share a timing origin or a duration. Collapsed to a settled end-state
     under reduced motion, below. */
  --duration-ticket-settle: 0.6s;   /* ticket card + 3 ledger rows fade/settle in */
  --duration-stamp: 6s;             /* one-shot stamp-lands timeline */
  --duration-keytag-loop: 5.4s;     /* independent, infinite */
  --duration-pencil-loop: 7.1s;     /* independent, infinite — no common short multiple with 5.4s */

  /* Reduced-motion resting angles (brief §5, stated exactly) */
  --keytag-rest-angle: -2deg;
  --pencil-rest-angle: 4deg;
  --stamp-rest-angle: -8deg;

  /* Swing amplitude. Key-tag +/-8deg is brief §5's stated number; the
     pencil's is "its own arc" (no degree stated), so a distinct, smaller
     amplitude is chosen so the two loops read as different motions. */
  --keytag-swing: 8deg;
  --pencil-swing: 5deg;

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

/* Brief §5 / house-tech-spec §8: prefers-reduced-motion removes every
   animation and reveal, no exception. base.css collapses the shared duration
   tokens; the four bespoke hero timings above are this site's own and are
   collapsed here on the same precedent. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-ticket-settle: 0.01ms;
    --duration-stamp: 0.01ms;
    --duration-keytag-loop: 0.01ms;
    --duration-pencil-loop: 0.01ms;
  }
}

/* @font-face — brief §2.5. Two families, three woff2 files (§5's <=2
   families / <=4 files, one file of headroom), self-hosted, OFL, subset to
   the house safe range (spec §8). METRICS-MATCHED FALLBACKS FIRST so swap
   costs no CLS: overrides measured with scripts/font-metrics.mjs against the
   real webfont files and a metric-compatible stand-in (Gelasio for Georgia,
   Liberation Sans for Arial); each `local()` still names the REAL font. */

@font-face {
  font-family: 'Yeseva One Fallback';
  src: local('Georgia');
  font-weight: 400;
  font-style: normal;
  size-adjust: 116.56%;
  ascent-override: 78.5%;
  descent-override: 20.59%;
  line-gap-override: 0%;
}

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

@font-face {
  font-family: 'Karla Fallback';
  src: local('Arial');
  font-weight: 700;
  font-style: normal;
  size-adjust: 100.06%;
  ascent-override: 91.64%;
  descent-override: 25.18%;
  line-gap-override: 0%;
}

/* House declared safe range (spec §8), identical on every face, no
   exceptions. COVERAGE GAP, recorded per §8's own practice: U+2010, U+2011,
   U+2012, U+2015, U+2032, U+2033 are in the declared range and absent from
   ALL THREE files here (same gap the range's own worked example records for
   the pilot site). No page renders any of the six (copy.md: commas, colons,
   full stops only), and since every face lacks the same six, the fallback
   failure mode would be consistent across faces, never mid-sentence. */
@font-face {
  font-family: 'Yeseva One';
  src: url('../assets/fonts/yeseva-one-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-700-latin.woff2') format('woff2');
  font-weight: 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;
}