/* Design tokens — see /new/design-system.md for rationale */
:root {
  color-scheme: light;

  /* Color — light theme */
  --color-bg: #f7f7f8;
  --color-bg-elevated: #ffffff;
  --color-bg-glass: rgba(20, 22, 28, 0.035);
  --color-border: rgba(20, 22, 28, 0.09);
  --color-border-strong: rgba(20, 22, 28, 0.18);

  --color-text: #14161c;
  --color-text-muted: #52555f;
  --color-text-faint: #82858f;

  /* Deepened from the original brand coral (#ff5468) so it clears ~4.5:1 contrast
     on a light background when used as text/icon color, not just as a fill. */
  --color-accent: #e0304a;
  --color-accent-soft: #ff6b7e;
  --color-accent-glow: rgba(224, 48, 74, 0.28);
  --color-accent-dim: rgba(224, 48, 74, 0.1);

  --color-success: #1a8a5a;
  --color-focus: #2563eb;

  /* Typography */
  --font-display: "Space Grotesk", "Sora", system-ui, sans-serif;
  --font-body: "Inter", "Public Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  --fs-h1: clamp(2.5rem, 6vw, 5rem);
  --fs-h2: clamp(1.75rem, 3.5vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.75rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  /* Spacing (8px scale) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --content-width: 1200px;
  --side-padding: clamp(1rem, 5vw, 4rem);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  /* Motion */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 180ms;
  --duration-base: 400ms;
  --duration-slow: 800ms;

  --nav-height: 72px;
}