:root {
  /* Primitives */
  --red-700: #b30000;
  --red-600: #e0161c;
  --red-500: #ff2630;
  --black-900: #0a0a0a;
  --black-800: #141414;
  --black-700: #1f1f1f;
  --black-600: #2b2b2b;
  --white-000: #ffffff;
  --white-100: #f5f5f5;
  --white-200: #e8e8e8;

  /* Semantic */
  --color-bg: var(--white-000);
  --color-bg-inverse: var(--black-900);
  --color-surface: var(--white-100);
  --color-surface-inverse: var(--black-800);
  --color-fg: var(--black-900);
  --color-fg-inverse: var(--white-000);
  --color-fg-muted: #5a5a5a;
  --color-fg-muted-inverse: #b8b8b8;
  --color-brand: var(--red-600);
  --color-brand-strong: var(--red-700);
  --color-border: var(--white-200);
  --color-border-inverse: var(--black-600);

  /* Typography */
  --font-display: 'Anton', 'Archivo Black', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing 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: 4.5rem;
  --space-9: 6.5rem;

  /* Layout */
  --content-max: 1180px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.18s;
  --dur-med: 0.32s;
}