/* Spacing & radius tokens.
   The starter's spacing base is 0.25rem (4px); radius base is 0.5rem (8px). */
:root {
  --spacing: 0.25rem; /* 4px base unit */

  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */

  /* Radius — derived exactly as the source: base 0.5rem */
  --radius: 0.5rem;
  --radius-sm: calc(var(--radius) - 4px); /* 4px */
  --radius-md: calc(var(--radius) - 2px); /* 6px */
  --radius-lg: var(--radius);             /* 8px */
  --radius-xl: calc(var(--radius) + 4px); /* 12px */

  --header-height: calc(var(--spacing) * 12 + 1px); /* 49px */
}