/**
 * Spacing System
 * Define consistent spacing variables based on an 8px base unit
 * This creates a predictable rhythm across the entire application
 */

:root {
    /* Base spacing unit: 8px */
    --spacing-base: 0.5rem; /* 8px */

    /* Spacing scale (multiples of base unit) */
    --spacing-0: 0;
    --spacing-1: 0.25rem;   /* 4px - micro spacing */
    --spacing-2: 0.5rem;    /* 8px - small spacing */
    --spacing-3: 1rem;      /* 16px - medium spacing */
    --spacing-4: 1.5rem;    /* 24px - large spacing */
    --spacing-5: 2rem;      /* 32px - xl spacing */
    --spacing-6: 3rem;      /* 48px - xxl spacing */
    --spacing-7: 4rem;      /* 64px - huge spacing */
    --spacing-8: 6rem;      /* 96px - massive spacing */

    /* Common use-case aliases */
    --spacing-xs: var(--spacing-1);
    --spacing-sm: var(--spacing-2);
    --spacing-md: var(--spacing-3);
    --spacing-lg: var(--spacing-4);
    --spacing-xl: var(--spacing-5);
    --spacing-2xl: var(--spacing-6);
    --spacing-3xl: var(--spacing-7);
    --spacing-4xl: var(--spacing-8);

    /* Component-specific spacing */
    --button-padding-y: var(--spacing-2);
    --button-padding-x: var(--spacing-4);
    --card-padding: var(--spacing-4);
    --input-padding: var(--spacing-2);
    --section-spacing: var(--spacing-6);
}