:root {
  /* Brand (red), lightest to darkest */
  --color-brand-100: #fecaca;
  --color-brand-300: #f87171;
  --color-brand-400: #ef4444;
  --color-brand-500: #dc2626;
  --color-brand-600: #b91c1c;
  --color-brand-700: #991b1b;

  /* Neutrals, lightest to darkest */
  --color-neutral-100: #e4e4e7;
  --color-neutral-200: #d4d4d8;
  --color-neutral-300: #a1a1aa;
  --color-neutral-400: #71717a;
  --color-neutral-500: #52525b;
  --color-neutral-600: #3f3f46;
  --color-neutral-700: #27272a;
  --color-neutral-800: #18181b;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-success: #22c55e;

  /* Spacing scale */
  --space-px: 1px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Breakpoints, for reference in @media rules (sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536) */

  /* Radius / layout constants */
  --radius: 0.25rem;
  --max-content: 1536px;
  --max-form: 768px;

  /* Font stacks, weights supplied by fonts.css */
  --font-sans: 'Open Sans', ui-sans-serif, system-ui, sans-serif;
  --font-heading: 'Montserrat', ui-sans-serif, system-ui, sans-serif;

  /* Type scale (size / line-height pairs) */
  --text-sm: 0.875rem;
  --leading-sm: 1.25rem;
  --text-lg: 1.125rem;
  --leading-lg: 1.75rem;
  --text-xl: 1.25rem;
  --leading-xl: 1.75rem;
  --text-2xl: 1.5rem;
  --leading-2xl: 2rem;
  --text-3xl: 1.875rem;
  --leading-3xl: 2.25rem;
}