:root {
  /* Layout */
  --container: 1200px;
  --container-narrow: 760px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Brand */
  --red: #E8000D;
  --red-hover: #C4000B;
  --red-dim: rgba(232, 0, 13, 0.12);
  --red-focus: rgba(232, 0, 13, 0.4);

  /* Backgrounds */
  --bg: #0D0D0D;
  --surface: #161616;
  --surface-raised: #1F1F1F;
  --border: #2A2A2A;

  /* Text */
  --text: #FFFFFF;
  --text-secondary: #A3A3A3;
  --text-muted: #666666;

  /* Typography scale */
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 22px;
  --text-xl: 32px;
  --text-2xl: 44px;
  --text-3xl: 60px;

  /* Transitions */
  --transition: 0.2s ease;
}