/* ==========================================================================
   tokens.css — the design brief, compiled.
   MegaGlitch Computer Repair, Ogden UT. Source: brief.md (approved, C3),
   quiet-premium family, split-hero archetype, "the solder point" hero.
   Every value below is the brief's — house-tech-spec §3: this file is the
   only place raw values live.
   ========================================================================== */

:root {

  /* --- Colour — brief §2 -------------------------------------------------
     Derivation order (design-rules §6): dossier §4.5 real-world colour and
     local character are both genuinely empty for this business and this
     metro (no sampled brand colour, no recoverable Ogden signal) → family +
     vertical-anchor norms: playbook §6.1's anchor ("device/component macro
     detail... careful, precise, a trustworthy handler of something fragile")
     derives a burnished-copper/graphite/bone-paper register directly. One
     mode, light. Contrast table is brief §2.1; every pair re-verified by
     scripts/qa/contrast.mjs. */

  --scheme: light;

  --color-bg: #FAF7F2;                /* bone-paper page ground */
  --color-surface: #F0EBE1;           /* trust-index band, footer band */
  --color-ink: #2B2924;               /* graphite — text, rules, focus ring, selection ground */
  --color-ink-muted: #5B564C;         /* detail text, form-control borders */
  --color-accent: #8A4A1E;            /* copper — primary CTA fill, eyebrow, h1 italic word, index numerals */
  --color-accent-ink: #FFFFFF;        /* label on accent fills */

  --color-border: rgba(43, 41, 36, .22);  /* decorative hairlines only — index-section row rules */
  --color-border-strong: #5B564C;         /* = ink-muted; >=3:1 vs bg AND surface, WCAG 1.4.11 — every form control's boundary */

  --color-focus: #2B2924;             /* = ink; 13.60 on bg, 12.23 on surface */
  /* --color-focus-on-band: —; commented out. No dark band anywhere on this site (brief §2). */

  --color-selection-bg: #2B2924;
  --color-selection-ink: #FAF7F2;

  /* Brief-specific: the hero art's brighter copper highlight — ART ONLY,
     never a text or UI-boundary colour, carries no contrast claim (brief §2). */
  --color-accent-bright: #C3702B;

  /* --- Typography — brief §3 ----------------------------------------------
     Newsreader 600 (roman; italic for the h1's one emphasis word only) +
     Mulish 400/700. 4 static woff2 files, SIL OFL 1.1, self-hosted. Neither
     face carries an opsz axis (brief §3: "the cheaper shape of the two faces
     this repo has shipped to date") — both static, single-weight-per-file. */

  --font-display: 'Newsreader', 'Newsreader Fallback', Georgia, 'Times New Roman', serif;
  --font-emphasis: 'Newsreader Italic', 'Newsreader Italic Fallback', Georgia, 'Times New Roman', serif;
  --font-body: 'Mulish', 'Mulish Fallback', 'Mulish Bold Fallback', 'Helvetica Neue', Arial, sans-serif;

  --font-weight-body: 400;
  --font-weight-body-strong: 700;
  --font-weight-display: 600;

  /* --- Type scale — brief §3.1, computed across its range at 375/768/1024/1440 */

  --text-hero: clamp(2.25rem, 1.6vw + 1.95rem, 3.4rem);  /* 37.2px@375 -> 43.49px@768 -> 47.58px@1024 -> 54.24px@1440 */
  --text-h2: 1.75rem;        /* 28px, fixed — trust-index and request-section h2 */
  --text-small: .8125rem;    /* 13px, fixed — eyebrow */
  --text-body: 1rem;         /* 16px, fixed — body, header brand, form */
  --text-lead: 1.0625rem;    /* 17px — hero lead */

  --leading-tight: 1.08;   /* hero h1 */
  --leading-snug: 1.2;     /* h2 */
  --leading-eyebrow: 1.3;  /* eyebrow (brief §4.1, reference/index.html) */
  --leading-body: 1.6;     /* body copy, lead */

  --tracking-tight: -0.01em;
  --tracking-normal: 0em;
  --tracking-wide: .14em;  /* eyebrow letter-spacing only — brief §3 note: no other em-relative value on this site */

  /* --- Space --------------------------------------------------------------
     House scale. --section-gap is the brief's one inter-section token
     (design-rules §7.1): 64px flat, identical at every width (brief §4.2) —
     this site has exactly three body sections and no content dense enough
     to argue a second step. */

  --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);      /* = 64px, flat (brief §4.2) */

  /* --- Layout --------------------------------------------------------------
     House defaults; --layout-gutter's floor (1.25rem = 20px) is the brief's
     own stated hero/section inline padding below 90rem (brief §4.1). */

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

  /* Brief-specific layout measures (§4.3) — declared once, consumed as
     tokens in site.css rather than as raw literals. */
  --art-aspect: 600 / 420;        /* 10:7 hero art box */
  --art-cap-desktop: 620px;       /* hero art inline-size cap from 90rem */
  --art-cap-mobile: 560px;        /* hero art max-block-size below 48rem */
  --copy-measure-mid: 34ch;       /* hero copy column, 48rem-89.99rem */
  --copy-measure-wide: 36ch;      /* hero copy column, from 90rem */
  --lead-measure-mid: 38ch;       /* hero lead, below 90rem */
  --lead-measure-wide: 42ch;      /* hero lead, from 90rem */
  --request-max: 640px;           /* request-section centred column, every width */
  --control-h: 52px;              /* buttons */
  --control-h-input: 44px;        /* inputs */
  --hero-column-gap-mid: 40px;    /* hero column-gap below 90rem */
  --hero-column-gap-wide: 64px;   /* hero column-gap from 90rem */
  --hero-row-gap: 20px;           /* hero stacked gap / copy<->lead row-gap */
  --hero-padding-top: 24px;       /* hero padding-block-start, every width (brief §4.1) */
  --hero-padding-bottom: 48px;    /* hero padding-block-end below 90rem (brief §4.1, reference/index.html) */
  --content-padding-inline: 20px;       /* hero/section/header/footer inline padding below 90rem (brief §4.1) */
  --content-padding-inline-wide: 56px;  /* hero/section/header/footer inline padding from 90rem */
  --header-min-h: 52px;           /* header min-height, brief §4.1: 52px stated, 52.2px real measured */
  --scroll-offset: 104px;         /* #request scroll-margin-top: 96px stack + 8px (brief §5.7) */
  --content-cap: 90rem;           /* beyond-1440 content cap (brief §5.8) */
  --index-sub-measure: 48ch;      /* trust-index sub-head measure (brief §3.1) */
  --index-num-col: 2rem;          /* trust-index row numeral column width */
  --request-sub-measure: 52ch;    /* request-section sub measure (brief §3.1) */
  --trace-glint-shift: 2px;       /* trace-glint's translateX travel (brief §10) */

  /* --- Radius / shadow / border --------------------------------------------
     quiet-premium restraint (design-rules §4): no drop shadow anywhere;
     house radius-sm only, for touch targets and the hero art box. */

  --radius-none: 0;
  --radius-sm: 2px;

  --shadow-none: none;

  --border-hairline: 1px;
  --border-thick: 3px;
  --border-style: solid;

  /* --- Motion — brief §10 ---------------------------------------------------
     House reveal system unchanged (trust-index rows, request-section fields;
     hero never revealed, it is the LCP element). Signature move: "the solder
     point" — two independent, non-synchronised ambient loops carried from
     tile-a.html unchanged. */

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

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

  --duration-solder-glint: 8400ms;   /* solder-point highlight, opacity .35<->1 */
  --duration-trace-glint: 6600ms;    /* trace far-end highlight, opacity .25<->.8 + translateX(2px) */

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

/* --------------------------------------------------------------------------
   @font-face — self-hosted woff2, SIL OFL 1.1 (assets/fonts/OFL-*.txt).
   font-display: swap, a metrics-matched fallback (*Fallback families above
   the real ones), and the ONE house declared safe range (house-tech-spec
   §8), identical on all four faces so a mid-sentence split cannot occur.

   FALLBACK METRICS measured with scripts/font-metrics.mjs against the real
   files. This build environment has neither Georgia nor Arial installed
   (fc-match substitutes DejaVu Serif for Georgia and Liberation Sans for
   Arial — Liberation Sans is a genuine metric-compatible Arial clone;
   DejaVu Serif is a disclosed proxy, the same pattern recorded on
   auto-evolution-north-logan-ut's README and shedhorn-plumbing-helena-mt's
   tokens.css when Georgia/Times New Roman were unavailable to measure
   against directly). `local()` still targets the real named system faces,
   so a visitor who actually has Georgia/Arial installed gets the correct
   substitution; only the override numbers are tuned against the proxy.
   The Newsreader Italic Fallback reuses the roman face's measured overrides
   — no italic proxy was available locally either, and roman/italic ascent,
   descent and line-gap are near-identical within one family in practice.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Newsreader Fallback';
  src: local('Georgia'), local('Georgia Pro');
  ascent-override: 85.24%;
  descent-override: 30.73%;
  line-gap-override: 0%;
  size-adjust: 86.22%;
}

@font-face {
  font-family: 'Newsreader Italic Fallback';
  src: local('Georgia Italic'), local('Georgia Pro Italic');
  font-style: italic;
  ascent-override: 88.11%;
  descent-override: 31.77%;
  line-gap-override: 0%;
  size-adjust: 83.42%;
}

@font-face {
  font-family: 'Mulish Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  ascent-override: 96.2%;
  descent-override: 23.93%;
  line-gap-override: 0%;
  size-adjust: 104.47%;
}

@font-face {
  font-family: 'Mulish Bold Fallback';
  src: local('Arial Bold'), local('Helvetica Neue Bold'), local('Liberation Sans Bold');
  font-weight: 700;
  ascent-override: 100.24%;
  descent-override: 24.93%;
  line-gap-override: 0%;
  size-adjust: 100.26%;
}

@font-face {
  font-family: 'Newsreader';
  src: url('../assets/fonts/newsreader-600-roman-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: 'Newsreader Italic';
  src: url('../assets/fonts/newsreader-600-italic-latin.woff2') format('woff2');
  font-weight: 600;
  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: 'Mulish';
  src: url('../assets/fonts/mulish-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: 'Mulish';
  src: url('../assets/fonts/mulish-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;
}