/* ============================================================================
   tokens/spacing.css — Spacing Design Tokens

   Consistent spacing scale for margins, paddings, and gaps.
   Based on 4px base unit.
   ============================================================================ */

:root {
    /* Spacing Scale */
    --space-0: 0;
    --space-0-5: 0.125rem; /* 2px */
    --space-1: 0.25rem;    /* 4px */
    --space-1-5: 0.375rem; /* 6px */
    --space-2: 0.5rem;     /* 8px */
    --space-2-5: 0.625rem; /* 10px */
    --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-11: 2.75rem;   /* 44px — chrome buttons / touch target */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */

    /* Component-specific spacing (derived from scale) */
    --gap-2xs: var(--space-0-5);
    --gap-xs: var(--space-1);
    --gap-sm: var(--space-2);
    --gap-md: var(--space-4);
    --gap-lg: var(--space-6);
    --gap-xl: var(--space-8);
}