:root {
  /* Layout */
  --container-width: 1280px;
  --content-width: 72rem;
  --padding-inline: clamp(16px, 4vw, 24px);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;

  /* Colors */
  --color-surface: #ffffff;
  --color-surface-alt: #f9f9f9;
  --color-background: #ffffff;
  --color-background-alt: #f9f9f9;
  --color-text: #171717;
  --color-text-muted: #5f5f5f;
  --color-text-soft: #7a7a7a;
  --color-heading: #171717;

  /* Radius */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
}