/* ============================================================
   DESIGN TOKENS: SPACING
   8px base unit system
   ============================================================ */

:root {
    /* ========================================
       SPACING SCALE (8px base)
       ======================================== */
    --ds-space-0: 0;
    --ds-space-1: 0.25rem;    /* 4px */
    --ds-space-2: 0.5rem;     /* 8px */
    --ds-space-3: 0.75rem;    /* 12px */
    --ds-space-4: 1rem;       /* 16px */
    --ds-space-5: 1.25rem;    /* 20px */
    --ds-space-6: 1.5rem;     /* 24px */
    --ds-space-8: 2rem;       /* 32px */
    --ds-space-10: 2.5rem;    /* 40px */
    --ds-space-12: 3rem;      /* 48px */
    --ds-space-16: 4rem;      /* 64px */
    --ds-space-20: 5rem;      /* 80px */
    --ds-space-24: 6rem;      /* 96px */

    /* ========================================
       COMPONENT SPACING
       ======================================== */
    --ds-padding-btn-sm: var(--ds-space-1) var(--ds-space-2);
    --ds-padding-btn: var(--ds-space-2) var(--ds-space-4);
    --ds-padding-btn-lg: var(--ds-space-3) var(--ds-space-6);

    --ds-padding-card: var(--ds-space-4);
    --ds-padding-card-header: var(--ds-space-3) var(--ds-space-4);

    --ds-gap-xs: var(--ds-space-1);
    --ds-gap-sm: var(--ds-space-2);
    --ds-gap-md: var(--ds-space-4);
    --ds-gap-lg: var(--ds-space-6);
    --ds-gap-xl: var(--ds-space-8);
}