:root {
  color-scheme: light;
  --color-surface: #ffffff;
  --color-surface-muted: #f4f6f8;
  --color-text: #202020;
  --color-brand-yellow: #ffcc29;
  --color-brand-yellow-strong: #e4ae10;
  --color-brand-graphite: #373435;
  --color-brand-charcoal: #000000;
  --color-brand-silver: #96989a;
  --color-action: var(--color-brand-yellow);
  --color-action-focus: var(--color-brand-yellow-strong);
  --color-border: #ccd3db;
  --shadow-dialog: 0 1.5rem 4rem rgb(17 24 39 / 22%);
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --container: 75rem;
  --focus-ring: 0 0 0 0.25rem rgb(255 201 40 / 60%);
  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-hero: 'Archivo Black', var(--font-body);
  --font-body: 'Montserrat', system-ui, sans-serif;
}