:root {
  /* ====== COLORS ====== */
  --white: #FFFFFF;
  --cream: #FAFAF9;
  --linen: #F5F4F1;
  --line: #E7E5E4;
  --line-strong: #D6D3D1;

  --ink: #0A1628;
  --ink-soft: #1F2937;
  --mute: #52525B;
  --mute-soft: #71717A;

  --orange: #FF6B1A;
  --orange-deep: #E55A0F;
  --orange-soft: #FFE4D2;
  --orange-glow: rgba(255, 107, 26, 0.18);

  /* glass surfaces */
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.58);
  --glass-edge: rgba(10, 22, 40, 0.06);

  /* shadows */
  --shadow-xs: 0 1px 2px rgba(10, 22, 40, 0.04);
  --shadow-sm: 0 4px 14px -8px rgba(10, 22, 40, 0.10);
  --shadow-md: 0 18px 40px -22px rgba(10, 22, 40, 0.18);
  --shadow-lg: 0 30px 70px -30px rgba(10, 22, 40, 0.22);
  --shadow-orange: 0 25px 50px -22px rgba(255, 107, 26, 0.35);
  --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 30px 60px -30px rgba(10, 22, 40, 0.18);

  /* ====== TYPOGRAPHY ====== */
  --font-display: "Cabinet Grotesk", "Geist", "Satoshi", system-ui, sans-serif;
  --font-body: "Geist", "Satoshi", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  --fs-display: clamp(2.75rem, 6.5vw, 5.75rem);
  --fs-h1: clamp(2.5rem, 5.5vw, 4.75rem);
  --fs-h2: clamp(2rem, 4vw, 3.5rem);
  --fs-h3: clamp(1.4rem, 2.2vw, 1.75rem);
  --fs-h4: 1.25rem;
  --fs-body: 1rem;
  --fs-body-lg: 1.125rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-mono: 0.78rem;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.55;

  /* ====== SPACING (4px scale) ====== */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-9: 36px;
  --s-10: 40px;
  --s-11: 44px;
  --s-12: 48px;
  --s-13: 52px;
  --s-14: 56px;
  --s-16: 64px;
  --s-18: 72px;
  --s-20: 80px;
  --s-24: 96px;
  --s-28: 112px;
  --s-32: 128px;

  --section-y: clamp(56px, 10vh, 160px);
  --container-x: clamp(20px, 4vw, 56px);
  --max-w: 1400px;

  /* ====== RADII ====== */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* ====== EASE / MOTION ====== */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --d-fast: 200ms;
  --d-base: 360ms;
  --d-slow: 720ms;

  /* ====== Z-INDEX SYSTEM ====== */
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* Mobile spacing override — tighten section padding on phones */
@media (max-width: 640px) {
  :root {
    --section-y: 48px;
  }
}

/* Reduced motion guard */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 0ms;
    --d-base: 0ms;
    --d-slow: 0ms;
  }
}