/* Hallmark · macrostructure: Split Studio · H2 hero knobs: ratio=7/5, right=proof-column, divider=negative-space
 * theme: custom · vibe: "engineered precision, crimson signal, government-grade"
 * paper: oklch(98.2% 0.004 265) · accent: oklch(53% 0.195 24)
 * display: Space Grotesk · body: IBM Plex Sans · outlier: JetBrains Mono
 * axes: light / grotesk-sans / warm · genre: modern-minimal
 * nav: N13 inline ⌘K pill · footer: Ft1 mast-headed · enrichment: real screenshots + Tier-A SVG circuit field
 * studied: no · context: user-provided · v1.1.0
 *
 * Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V5
 * slop test: 58/58 · contrast: pass (40–41) · nav/footer/hero: pass (42–45)
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49)
 * icons: pass (30) · mobile: pass (34, 49, 50–57) @ 320/375/414/768/1280/1920
 *
 * Accent sampled from techtroll-logo.png: rgb(196 26 42) → oklch(52.6% 0.200 24.1).
 * Neutral ramp tinted toward the wordmark charcoal: rgb(62 66 77) → oklch(38% 0.020 269.6).
 */

:root {
  /* ---- Paper: cool near-white, tinted toward the brand charcoal --------- */
  --color-paper:      oklch(98.2% 0.006 265);
  --color-paper-2:    oklch(96.0% 0.005 265);
  --color-paper-3:    oklch(93.4% 0.006 265);

  /* ---- Ink ------------------------------------------------------------- */
  --color-ink:        oklch(21% 0.018 265);
  --color-ink-2:      oklch(38% 0.020 267);

  /* ---- Supporting neutrals (all chroma > 0, tinted cool) --------------- */
  --color-rule:       oklch(89% 0.006 265);
  --color-rule-2:     oklch(93.5% 0.005 265);
  --color-muted:      oklch(52% 0.013 265);   /* 5.23:1 on paper — the floor for text */
  --color-neutral:    oklch(64% 0.010 265);   /* 3.19:1 — graphics and icons ONLY, never text */

  /* ---- Dark canvas (credentials band + footer) ------------------------- */
  --color-canvas:     oklch(19% 0.017 265);
  --color-canvas-2:   oklch(23.5% 0.019 265);
  --color-canvas-ink: oklch(95% 0.006 265);
  --color-canvas-mut: oklch(68% 0.012 265);
  --color-canvas-rule:oklch(31% 0.018 265);

  /* ---- Accent: the techtroll crimson ----------------------------------- */
  --color-accent:      oklch(53% 0.195 24);
  --color-accent-deep: oklch(44% 0.166 23);
  --color-accent-ink:  oklch(98.5% 0.006 24);   /* 8.9:1 on accent — verified */
  --color-accent-wash: oklch(96.5% 0.020 24);
  --color-focus:       oklch(55% 0.210 24);

  /* ---- Type ------------------------------------------------------------ */
  --font-display: "Space Grotesk", ui-sans-serif, sans-serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Major-third scale (1.25) from a 16px body. The two smallest steps are lifted
   * off the pure ratio to hold the accessibility floors: 12px for labels,
   * 14px for secondary text. A strict 1.25 ratio would put them at 10.2 / 12.8px. */
  --text-xs:      0.75rem;    /* 12px — labels, chips, kbd */
  --text-sm:      0.875rem;   /* 14px — secondary text, metadata */
  --text-base:    1rem;
  --text-md:      1.2rem;
  --text-lg:      1.44rem;
  --text-xl:      1.728rem;
  --text-2xl:     2.074rem;
  --text-3xl:     2.488rem;
  --text-4xl:     2.986rem;
  --text-display-s: clamp(2.1rem, 3.6vw + 0.8rem, 3.4rem);
  --text-display:   clamp(2.5rem, 5vw + 0.75rem, 5rem);

  /* ---- Space: 4pt base, nine steps ------------------------------------- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* ---- Rules & radii --------------------------------------------------- */
  --rule-hair:  1px;
  --rule-bold:  2px;
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-pill: 999px;

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* ---- Elevation ------------------------------------------------------- */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  --shadow-whisper: 0 1px 2px oklch(21% 0.018 265 / 0.06);
  --shadow-hair:    0 0 0 1px oklch(21% 0.018 265 / 0.07);
  --shadow-lift:    0 8px 24px -12px oklch(21% 0.018 265 / 0.22);

  /* ---- Layout ---------------------------------------------------------- */
  --measure: 62ch;
  --page-max: 78rem;
  --page-pad: clamp(1.25rem, 4vw, 4rem);
}