:root {
  --spn-paper: oklch(0.19 0.022 215);
  --spn-surface: oklch(0.24 0.025 215);
  --spn-surface-alt: oklch(0.28 0.028 215);
  --spn-surface-subtle: oklch(0.21 0.022 215);
  --spn-border: oklch(0.32 0.025 215);
  --spn-border-strong: oklch(0.42 0.030 215);
  --spn-ink: oklch(0.96 0.010 215);
  --spn-ink-muted: oklch(0.74 0.015 215);
  --spn-ink-subtle: oklch(0.58 0.018 215);
  --spn-accent: oklch(0.725 0.155 49.6);
  --spn-accent-hover: oklch(0.832 0.151 80.7);
  --spn-accent-ink: oklch(0.16 0.02 60);
  --spn-brand-gold: oklch(0.832 0.151 80.7);
  --spn-focus: oklch(0.832 0.151 80.7);
  --spn-state-error: oklch(0.62 0.22 25);
  --spn-state-success: oklch(0.72 0.18 145);

  --spn-font-display: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --spn-font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --spn-space-xs: 4px;
  --spn-space-sm: 8px;
  --spn-space-md: 16px;
  --spn-space-lg: 24px;
  --spn-space-xl: 32px;
  --spn-space-2xl: 48px;
  --spn-space-3xl: 64px;

  --spn-radius-sm: 4px;
  --spn-radius-md: 8px;
  --spn-radius-lg: 12px;
  --spn-radius-pill: 9999px;

  --spn-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spn-dur-fast: 150ms;
  --spn-dur-mid: 220ms;
}