/* ==========================================================================
   Willis Collision — Design Tokens
   The single source of truth for color, type, spacing, motion.
   Every other stylesheet should reference these. No hex codes elsewhere.
   ========================================================================== */

:root {
  /* ---------- Color: Primary ---------- */
  --c-ink: #111111;
  --c-paper: #ffffff;
  --c-signal: #0b5fff;
  --c-signal-deep: #0941b8;
  --c-signal-soft: #e6efff;

  /* ---------- Color: Neutrals ---------- */
  --c-charcoal: #2a2a2a;
  --c-slate: #5a5f66;
  --c-mist: #e6e8ec;
  --c-fog: #f5f6f8;

  /* ---------- Color: Semantic ---------- */
  --c-success: #1f9d55;
  --c-warning: #d97706;
  --c-error: #c8341f;

  /* ---------- Type ---------- */
  --ff-sans:
    "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Desktop-first scale; mobile overrides below */
  --fs-display: 4rem; /* 64 */
  --fs-h1: 3rem; /* 48 */
  --fs-h2: 2.25rem; /* 36 */
  --fs-h3: 1.5rem; /* 24 */
  --fs-h4: 1.125rem; /* 18 */
  --fs-body: 1.0625rem; /* 17 */
  --fs-small: 0.875rem; /* 14 */
  --fs-micro: 0.75rem; /* 12 */

  --lh-tight: 1.05;
  --lh-snug: 1.15;
  --lh-normal: 1.35;
  --lh-relaxed: 1.6;

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-bleed: 1440px;
  --gutter: 1.5rem; /* 24 */
  --gutter-md: 3rem; /* 48 */
  --gutter-lg: 5rem; /* 80 */

  /* ---------- Spacing scale ---------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;

  /* ---------- Radius / Shadow / Motion ---------- */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 16px;

  --shadow-subtle:
    0 1px 3px rgba(17, 17, 17, 0.06), 0 4px 12px rgba(17, 17, 17, 0.04);
  --shadow-lift:
    0 4px 8px rgba(17, 17, 17, 0.06), 0 12px 32px rgba(17, 17, 17, 0.08);

  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 400ms;
  --easing: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Mobile type scaling */
@media (max-width: 640px) {
  :root {
    --fs-display: 2.5rem; /* 40 */
    --fs-h1: 2rem; /* 32 */
    --fs-h2: 1.625rem; /* 26 */
    --fs-h3: 1.25rem; /* 20 */
  }
}

/* Honor user's reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}