:root {
  --bg: #0b0d12;
  --bg-2: #12151b;
  --surface: #1b2028;
  --surface-2: #222833;
  --text: #f5f6f8;
  --text-2: #a7afbb;
  --text-3: #949eae;
  --border: #303743;
  --border-soft: rgba(245, 246, 248, 0.08);
  --accent: #4263eb;
  --accent-soft: rgba(66, 99, 235, 0.16);
  --accent-hover: #7b93ff;
  --focus: #8aa0ff;
  --ok: #3ecf8e;
  --warn: #e8b84a;

  --font-sans: "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4.5rem;
  --space-6: 7rem;
  --container: 80rem;
  --gutter: clamp(1.25rem, 4vw, 2.25rem);
  --radius: 4px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --h1: clamp(2.4rem, 5vw, 4.25rem);
  --h2: clamp(1.75rem, 3vw, 2.75rem);
  --h3: clamp(1.15rem, 1.4vw, 1.35rem);
  --lead: clamp(1.05rem, 1.4vw, 1.25rem);
  --nav-h: 4.25rem;
}

@media (prefers-reduced-motion: reduce) {
  :root { --ease: linear; }
}