:root {
  --bg: #f3f5f7;
  --bg-soft: #f4f6f8;
  --ink: #0a0d12;
  --ink-muted: #6b7280;
  --ink-soft: #9aa3af;
  --paper: #ffffff;
  --vault: #0f1217;
  --vault-deep: #0b0e14;
  --line: rgba(10, 13, 18, 0.08);
  --line-strong: rgba(10, 13, 18, 0.14);
  --font: "Plus Jakarta Sans", "Syne", sans-serif;
  --display-font: Syne, "Plus Jakarta Sans", sans-serif;
  --header-height: 4.75rem;
  --touch-min: 44px;
  --radius-pill: 999px;
  --radius-card: 28px;
  --radius-vault: 36px;
  --pad-x: clamp(1.1rem, 3.4vw, 2.75rem);
  --pad-y: clamp(3.5rem, 9vw, 9rem);
  --gap: clamp(2.5rem, 4.2vw, 5rem);
  --max: 92rem;
  --display: clamp(2.2rem, 7.4vw, 5.6rem);
  --display-xl: clamp(2.45rem, 11.8vw, 14.2rem);
  --title: clamp(1.85rem, 5.2vw, 4.25rem);
  --lead: clamp(1.05rem, 1.6vw, 1.25rem);
  --stat: clamp(2.4rem, 7.8vw, 6.4rem);
  --meta: 0.72rem;
  --shadow-pill: 0 10px 30px rgba(10, 13, 18, 0.08);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 768px) {
  :root {
    --header-height: 5.25rem;
  }
}