:root {
  --color-ink: var(--wp--preset--color--ink);
  --color-text: var(--wp--preset--color--text);
  --color-muted: var(--wp--preset--color--muted);
  --color-surface: var(--wp--preset--color--surface);
  --color-surface-alt: var(--wp--preset--color--surface-alt);
  --color-accent: var(--wp--preset--color--accent);
  --color-border: var(--wp--preset--color--border);

  --container: 1200px;
  --content: 760px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-space: clamp(72px, 8vw, 128px);
  --section-space-sm: clamp(48px, 6vw, 88px);

  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --shadow-card: 0 16px 40px rgb(17 24 39 / 8%);

  --transition: 180ms ease;
  --header-height: 80px;
}

@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --header-height: 68px;
  }
}