/* ============================================================
   tokens.css — Design tokens for portfolio v1
   Direction: A-green (locked 2026-05-07)
   Owners: only `tokens.css` defines token values. Other CSS files consume.
   Updating a value here updates it everywhere.
   ============================================================ */

:root {
  /* ---------- Color ---------- */
  --bg-base: #F6F7EE;
  --bg-elevated: #FBFCF6;

  --text-base: #083400;
  --text-muted: #3D5535;
  --text-subtle: #5F6B54; /* darkened 2026-05-24 — #8C9580 failed AA (2.9:1) on --bg-base; now 5.0:1 */

  --border-base: #E0E5D2;
  --border-strong: #083400;

  --accent-lime: #87EA5C;
  --accent-forest: #083400;
  --accent-soft: #D4F5C5;

  --success: #3D7232;
  --warn: #C99500;
  --error: #A8392E;

  /* ---------- Typography ---------- */
  --font-display: "Unbounded", Impact, "Arial Black", system-ui, sans-serif;
  --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;

  --fs-display: clamp(60px, 9vw, 112px); /* hero only */
  --fs-h1: 52px;
  --fs-h2: 36px;
  --fs-h3: 26px;
  --fs-body: 17px;
  --fs-body-lg: 19px;
  --fs-h4: 22px; /* sub-headings, large numerals, logo */
  --fs-small: 13px;
  --fs-body-sm: 15px; /* secondary / dense body */
  --fs-micro: 11px;

  --lh-tight: 1.0;
  --lh-snug: 1.1;
  --lh-normal: 1.55;
  --lh-relaxed: 1.6;

  --tracking-tight: -0.03em;
  --tracking-headline: -0.015em;
  --tracking-caps: 0.14em;
  --tracking-caps-wide: 0.16em;

  /* ---------- Spacing (4-base scale) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- Radii ---------- */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* ---------- Shadow ---------- */
  --shadow-md: 0 2px 4px rgba(8, 52, 0, 0.06), 0 10px 24px rgba(8, 52, 0, 0.12);
  --shadow-lg: 0 4px 8px rgba(8, 52, 0, 0.08), 0 20px 40px rgba(8, 52, 0, 0.16);
  /* CTA hover lift — 2-layer, colored, max 14% opacity (creative-mode allowance,
     under the 15% shadow ceiling in design-voice.md). Replaces a hardcoded
     single-layer 0.32-opacity shadow on .btn-primary:hover. */
  --shadow-cta: 0 2px 6px rgba(8, 52, 0, 0.08), 0 12px 26px rgba(8, 52, 0, 0.14);

  /* ---------- Motion ----------
     One named ladder. Every transition/animation DURATION routes through a token;
     near-duplicate raw values (0.9/1.0/1.1/1.2s reveals, 2.2/2.8s draws) were
     consolidated 2026-06-08. Stagger DELAYS stay inline — they're intentional
     incremental ramps, not part of this ladder. */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-press: 0.12s;     /* tactile button / card press */
  --dur-micro: 0.15s;     /* input bg, tertiary link color shift */
  --dur-fast: 0.18s;      /* borders, nav underline, color shifts */
  --dur-med: 0.3s;        /* card lift, annotation-pin reveal */
  --dur-slow: 0.6s;       /* manifest underline draw */
  --dur-reveal: 1.2s;     /* scroll-up fade-ins */
  --dur-reveal-lg: 1.4s;  /* large band reveals (stats) */
  --dur-draw: 2.4s;       /* SVG numeral stroke-draw */

  /* ---------- Layout ---------- */
  --content-max: 1280px;
  --content-pad-x: 48px;
  --content-pad-x-mobile: 24px;
}
