/* ==========================================================================
   OREGON — design tokens
   GOAL.md §1. Do not add colours outside this palette; accent is used only
   for rules/CTAs, sparingly.
   ========================================================================== */

:root {
  /* ---- colour ---- */
  --ink: #0E0F11;       /* ground */
  --panel: #16181B;     /* raised panels / cards */
  --steel: #8A8D91;     /* hairlines, secondary text, mono */
  --offwhite: #F5F4F2;  /* primary text on dark */
  --accent: #5B7C99;    /* CTAs / rules only */
  /* P5 fix: same steel-blue hue, lifted to pass 4.5:1 body-text contrast on
     --ink/--panel — --accent itself measures ~4.37:1 on --ink, just under
     WCAG AA for normal-size text (confirmed failing on the craft slide's
     mono micro-claims). Large text/UI elements (rules, dots, borders,
     hover/focus states) keep using --accent unchanged; this variant is
     only for small accent-coloured text set directly on a flat dark
     ground (never used on photography, where the existing scrim/shadow
     treatment is the correct fix per GOAL.md §5). */
  --accent-text: #6F8EA9;

  --steel-10: rgba(138, 141, 145, 0.10);
  --steel-20: rgba(138, 141, 145, 0.20);
  --steel-35: rgba(138, 141, 145, 0.35);
  --ink-70: rgba(14, 15, 17, 0.70);
  --ink-85: rgba(14, 15, 17, 0.85);
  --offwhite-60: rgba(245, 244, 242, 0.60);

  /* ---- type families ---- */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* Archivo variable-font width axis: ~125 expanded for display lines,
     ~75 condensed for labels/eyebrows (GOAL.md §1). */
  --wdth-display: 125;
  --wdth-label: 75;

  /* ---- type scale (fluid) ----
     P8: global type floor — nothing under 18px at 1920×1080 (GOAL.md P8
     item 2). Values in comments computed for a 1920px viewport (1rem=16px);
     verify in browser. Body scales ~1.45x over the old tokens, display more. */
  --fs-hero: clamp(3.7rem, 8.2vw + 0.2rem, 11rem);     /* P10 (Tan): "double the size" — no-JS / prefers-reduced-motion static fallback for .display--hero; hero.js's real path re-tunes .hero__line in hero.css to the same value. 1920: ~161px, 1440: ~121px, 1366: ~115px (PM: 8.8vw → 8.2vw so "ON THE SKYLINE" clears the 64px side margin at 1920 — at 172px the O ran off the left edge). */
  --fs-h1: clamp(2.2rem, 5.2vw + 1.4rem, 8.6rem);      /* 1920: ~122px; 1440: ~97px; 375: 44.8px; floor bites < ~340px */
  --fs-h2: clamp(2.1rem, 3vw + 0.9rem, 4.6rem);        /* 1920: ~72px; 1440: ~58px */
  --fs-body: clamp(1.1rem, 0.7vw + 0.85rem, 1.7rem);   /* 1920: ~27px; 1440: ~24px */
  --fs-small: clamp(1rem, 0.5vw + 0.7rem, 1.35rem);    /* 1920: ~21px */
  --fs-mono:    clamp(1.05rem, 0.5vw + 0.75rem, 1.4rem);    /* 1920: ~20px */
  --fs-eyebrow: clamp(1.05rem, 0.45vw + 0.75rem, 1.35rem); /* 1920: ~19px */

  /* ---- fixed chrome clearance ---- */
  /* P8: the real logo (fixed, top-left, 170px × 82px on desktop, 120px ×
     58px on mobile) is taller than the old wordmark. Slides whose content
     is tall enough to press against their top padding must clear it. */
  --chrome-top: calc(var(--space-3) + 82px + 1.25rem);

  /* ---- grid & spacing ---- */
  --grid-columns: 12;
  --margin: clamp(1.25rem, 4vw, 4rem);
  --gutter: clamp(0.75rem, 1.6vw, 1.5rem);
  --rule: 1px;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.4s;
  --dur-med: 0.8s;
  --dur-slow: 1.2s;

  color-scheme: dark;
}