/* Hylē v4 · design tokens. Single source for colour, type, space, radius, elevation, motion, z-index.
   Round 2: AA neutrals, one Goodly cut (500, never synthesised), radius + control-height scales, safe-area inset.
   Round 4A: working-text ramp (section 22/500 under a larger Goodly title, row 16/600, description 15 ink-2,
   small 13 for metadata only, mono for identifiers only). plan/redesign-v4/round4/A/TYPE-R4.md */
@font-face { font-family: 'Goodly'; src: url('/site/system/fonts/Goodly-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/site/system/fonts/InterVariable.woff2') format('woff2-variations'), url('/site/system/fonts/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/site/system/fonts/GeistMono-latin-ext.woff2') format('woff2'); font-weight: 400 600; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; src: url('/site/system/fonts/GeistMono-latin.woff2') format('woff2'); font-weight: 400 600; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* ---------- Families (3) ---------- */
  --font-brand: 'Goodly', 'Inter', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---------- Type scale (Round 4A working-text ramp) ----------
     Goodly (one 500 cut): hero, display, title + wordmark only. Inter: heading → small. Geist Mono: identifiers and codes.
       title    the one Goodly page title. It always out-sizes and out-weighs the section heads below it.
       heading  section heads, Inter 22/500: a real step above row titles, lighter than the Goodly title.
       row      row, card and list-item titles, 16/600.        body   prose, 16/400.
       ui       controls, 15/500.                               desc   descriptions, hints, sublabels: 15/400 in ink-2.
       small    metadata only (timestamps, counts, badges, legends), 13.   mono   IDs, codes and keys, 12. */
  --fs-hero: clamp(44px, 8.2vw, 116px);     --lh-hero: .98;   --ls-hero: -.042em;
  --fs-display: clamp(32px, 4.4vw, 60px);   --lh-display: 1.05; --ls-display: -.032em;
  --fs-title: clamp(30px, 2.8vw, 40px);     --lh-title: 1.1;  --ls-title: -.028em;
  /* 10-09 C8: Goodly section head on public content pages (below the page title, above the 22/500 heading). 32 at 1440, 38 at 1920. */
  --fs-section: clamp(28px, 2.2vw, 38px);   --lh-section: 1.12;
  --fs-heading: 22px;  --lh-heading: 1.28;  --ls-heading: -.016em;  --fw-heading: 500;
  --fs-lead: 18px;     --lh-lead: 1.55;     --ls-lead: -.008em;
  --fs-body: 16px;     --lh-body: 1.6;      --ls-body: -.006em;
  --fs-row: 16px;      --lh-row: 1.4;       --ls-row: -.01em;
  --fs-ui: 15px;       --lh-ui: 1.45;       --ls-ui: -.006em;
  --fs-desc: 15px;     --lh-desc: 1.5;      --ls-desc: -.004em;
  --fs-small: 13px;    --lh-small: 1.45;    --ls-small: 0;
  --fs-mono: 12px;     --lh-mono: 1.4;      --ls-mono: .04em;
  /* Official wordmark dimensions are SVG geometry; text fallback uses the existing type scale. */
  --fs-wordmark: 22px;

  /* ---------- Brand ---------- */
  --brand-blue: #1275d8;
  --brand-blue-vivid: #0066ff;
  --brand-blue-deep: #0d5bb5;
  --brand-orange: #e19136;
  --brand-orange-deep: #b36718;
  --brand-night: #0b1830;
  --brand-night-2: #13254a;
  --brand-glow: #ffd29a;
  --brand-gradient: linear-gradient(135deg, #0d5bb5 0%, #1275d8 35%, #e19136 75%, #b36718 100%);
  --brand-mark: linear-gradient(135deg, #0d5bb5 0%, #13254a 56%, #9a5212 100%);   /* behind white letters / small text (AA) */

  /* ---------- Neutrals ----------
     ink-2 / ink-3 are AA (≥4.5:1) on paper, surface, raised, sunken and sunken-2. ink-4 is never text. */
  --paper: #faf9f5;
  --surface: #fffefa;
  --raised: #ffffff;
  --sunken: #f3f1ea;
  --sunken-2: #ece9df;
  --ink: #141413;
  --ink-2: #4e4a44;
  --ink-3: #67635b;
  --ink-4: #b5b1a7;
  --hairline: #e5e2d8;
  --hairline-strong: #d4cfbe;
  --on-dark: #ffffff;
  --on-dark-2: rgba(255,255,255,.84);   /* on night surfaces only, never on the field's orange half */
  --on-dark-3: rgba(255,255,255,.66);
  --night-edge: rgba(255,255,255,.14);

  /* ---------- Action + accent ---------- */
  --accent: #106cca;          /* AA as text on paper/sunken and behind white text; the field keeps --brand-blue */
  --accent-ink: #0f63b8;
  --accent-tint: rgba(18,117,216,.08);
  --accent-tint-2: rgba(18,117,216,.16);
  --focus-ring: 0 0 0 3px rgba(18,117,216,.28);
  --selection: rgba(225,145,54,.24);

  /* ---------- Status (in-palette; text values are AA on their own tint) ---------- */
  --success: #0d6f62;  --success-tint: rgba(15,123,108,.09);  --success-line: rgba(15,123,108,.28);
  --warning: #8a4f0d;  --warning-tint: rgba(225,145,54,.13);  --warning-line: rgba(225,145,54,.42);
  --danger:  #a63d31;  --danger-tint: rgba(181,71,58,.08);    --danger-line: rgba(181,71,58,.32);
  --info:    #1275d8;  --info-tint: rgba(18,117,216,.08);     --info-line: rgba(18,117,216,.26);

  /* ---------- Field marks (12 fields) ---------- */
  --field-bio: #0f7b6c; --field-med: #d9467a; --field-aiml: #6a4fd8; --field-eng: #7a5a3a;
  --field-sci: #2a8fc4; --field-quant: #1275d8; --field-biz: #c07a1a; --field-policy: #8e4585;
  --field-ir: #274c77; --field-soc: #3f8f7f; --field-law: #b5473a; --field-hum: #8a9a5b;

  /* ---------- Space (4px base) ---------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px;
  --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 112px; --s-13: 160px;
  --gutter: clamp(20px, 4vw, 40px);
  --page-max: 1200px;

  /* ---------- Radius: xs kbd/cite · sm badge/menu item · md every control · lg card/menu · xl sheet/dialog · 2xl paper sheet.
     Pill only for chips, marketing CTAs (.btn-pill) and the job pill. Nested: outer = inner + padding. ---------- */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px;

  /* ---------- Control heights: sm chip/compact · md button/search/select/segmented · lg form field / focus submit. Phone ≥ 44. ---------- */
  --ctl-sm: 32px; --ctl-md: 40px; --ctl-lg: 48px;

  /* ---------- Elevation ---------- */
  --e-0: 0 0 0 1px var(--hairline);
  --e-1: 0 1px 2px rgba(20,20,19,.05), 0 0 0 1px rgba(20,20,19,.05);
  --e-2: 0 1px 2px rgba(20,20,19,.04), 0 6px 16px -6px rgba(20,20,19,.10), 0 0 0 1px rgba(20,20,19,.05);
  --e-3: 0 2px 4px rgba(20,20,19,.04), 0 18px 40px -14px rgba(20,20,19,.20), 0 0 0 1px rgba(20,20,19,.06);
  --e-4: 0 4px 8px rgba(11,24,48,.06), 0 40px 90px -30px rgba(11,24,48,.45), 0 0 0 1px rgba(20,20,19,.06);

  /* ---------- Motion ---------- */
  --d-1: 120ms; --d-2: 160ms; --d-3: 240ms; --d-4: 420ms; --d-5: 720ms;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-press: cubic-bezier(.3,.7,.4,1);

  /* ---------- Interaction states (Audit-fix A) ----------
     One vocabulary for every interactive surface. Lanes apply the .is-hoverable / .is-pressable / .is-selectable
     helpers (components.css "Interaction states") or read these tokens directly; never invent per-page values.
       hover     tint on paper/sunken surfaces; cards lift one elevation step instead.
       active    press = a darker tint + 1px settle (never a scale on text rows).
       selected  raised white + inset edge + 3px field indicator on the leading edge.
       focus     2px accent outline at 2px offset, plus the soft ring on filled controls.
       loading   skeleton base + sheen; aria-busy on the container.     empty   field-tile art + one action. */
  --hover-tint: rgba(20,20,19,.045);
  --hover-tint-strong: rgba(20,20,19,.07);
  --press-tint: rgba(20,20,19,.10);
  --press-shift: 1px;
  --hover-lift: -2px;
  --selected-bg: var(--raised);
  --selected-edge: inset 0 0 0 1px rgba(20,20,19,.08), 0 1px 2px rgba(20,20,19,.06);
  --selected-bar: linear-gradient(180deg, var(--brand-blue), var(--brand-orange));
  --focus-outline: 2px solid var(--accent);
  --focus-offset: 2px;
  --disabled-opacity: .48;
  --loading-base: var(--sunken);
  --loading-sheen: rgba(255,255,255,.72);
  --empty-art: 76px;

  /* ---------- Paper field (Audit-fix A): the landing's field, diluted for working surfaces ----------
     Wash and glyph alpha are capped so ink-3 and accent text stay AA on top of the field (gate b). */
  --paper-field-wash: .16;
  --paper-field-glyph: .2;

  /* ---------- Layers ---------- */
  --z-base: 1; --z-sticky: 20; --z-nav: 40; --z-drawer: 60; --z-overlay: 80; --z-dialog: 90; --z-toast: 100; --z-review: 200;

  /* ---------- Shell metrics + safe area ----------
     --safe-bottom is written in px by HyleUI.safeArea(): bottom nav + every visible [data-dock] + device inset.
     Every persistent bottom element registers with data-dock; nothing else may be fixed at the bottom. */
  --nav-h: 64px; --sidebar-w: 256px; --sidebar-w-open: 256px; --topbar-h: 56px; --bottomnav-h: 56px;
  --safe-bottom: 0px; --dock-base: 0px;
}
@media (max-width: 640px) {
  :root { --fs-lead: 17px; --nav-h: 60px; --fs-wordmark: 20px; }
}
/* App scope: working headers. One Goodly title per page at 30→36px (it out-sizes the 22/500 section heads), lede at body size. */
.app-body { --fs-title: clamp(30px, 2.5vw, 36px); --lh-title: 1.12; --fs-lead: 16px; }

/* Public scope · founder review 10-09 (C1): designed for 1920×1080 first.
   Every public page (the ones that mount the public nav) and every auth page (.focus-foot) reads these. The content column
   grows with the screen: 1200 up to 1440 (unchanged there), 1440 at 1824, 1520 at 1920+. At 1920 that leaves ~200px of air per
   side (was 360). The gutter grows to 64. From 1680 the type takes one step up so the wider column keeps its proportion. */
body:has(> [data-public-nav]), body:has(.focus-foot) {
  --page-max: clamp(1200px, 79vw, 1520px);
  --gutter: clamp(20px, 4vw, 64px);
}
@media (min-width: 1680px) {
  body:has(> [data-public-nav]), body:has(.focus-foot) {
    --fs-hero: clamp(104px, 6.6vw, 132px);
    --fs-display: clamp(60px, 3.6vw, 72px);
    --fs-title: clamp(40px, 2.3vw, 46px);
    --fs-heading: 24px;
    --fs-lead: 20px;
    --fs-body: 17px;
    --fs-desc: 16px;
  }
}