:root {
  --site-space-1: 4px;
  --site-space-2: 8px;
  --site-space-3: 12px;
  --site-space-4: 16px;
  --site-space-5: 24px;
  --site-space-6: 32px;
  --site-space-7: 48px;
  --site-space-8: 64px;
  --site-space-9: 96px;
  --site-text-xs: 12px;
  --site-text-sm: 13px;
  --site-text-base: 16px;
  --site-text-lg: 18px;
  --site-text-xl: 24px;
  --site-text-page: 40px;
  --site-text-hero: 56px;
  --site-color-bg: #050505;
  --site-color-surface: #111214;
  --site-color-fg: #f4f4f0;
  --site-color-muted: rgba(244, 244, 240, 0.56);
  --site-color-faint: rgba(244, 244, 240, 0.08);
  --site-color-border: rgba(244, 244, 240, 0.22);
  --site-color-border-strong: rgba(244, 244, 240, 0.72);
  --site-color-signal: #ff7256;
  --site-radius-control: 3px;
  --site-radius-input: 4px;
  --site-radius-image: 8px;
  --site-radius-panel: 16px;
  --site-radius-round: 999px;
  --site-nav-height: 64px;
  --site-container: 1200px;
  --site-gutter: 32px;
  --site-motion-hover: 160ms;
  --site-motion-panel: 220ms;
  --site-motion-panorama: 760ms;
  --site-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --site-z-nav: 100;
  --site-z-popover: 400;
  --site-z-toast: 1000;
}

@media (max-width: 640px) {
  :root {
    --site-gutter: 16px;
    --site-text-page: 32px;
    --site-text-hero: 38px;
  }
}