/*
 * Spacing Scale
 *
 * Provides consistent spacing utilities across the application.
 * Use these CSS variables for margins, paddings, and gaps to maintain visual consistency.
 *
 * Scale based on commonly used values throughout the codebase:
 * - Small increments (4px, 8px, 12px, 16px) for tight spacing
 * - Medium increments (20px, 24px, 28px, 32px) for component spacing
 * - Large increments (40px, 48px, 54px, 64px) for section spacing
 */

:root {
    /* Extra small spacing */
    --spacing-1: 4px;    /* Form field gaps, tight spacing */
    --spacing-2: 8px;    /* Icon gaps, small component spacing */
    --spacing-3: 12px;   /* Input padding, checkbox gaps */
    --spacing-4: 16px;   /* Default component spacing */

    /* Small spacing */
    --spacing-5: 20px;   /* Card padding */
    --spacing-6: 24px;   /* Form section gaps */
    --spacing-7: 28px;   /* Medium section spacing */
    --spacing-8: 32px;   /* Large section spacing, button padding */

    /* Medium spacing */
    --spacing-10: 40px;  /* Large vertical spacing */
    --spacing-12: 48px;  /* Extra large spacing */
    --spacing-14: 54px;  /* Section dividers */
    --spacing-16: 64px;  /* Page margins */

    /* Large spacing */
    --spacing-20: 80px;  /* Large page margins */
    --spacing-24: 96px;  /* Extra large page sections */
    --spacing-30: 120px; /* Maximum spacing */
}

/* Utility classes for common spacing patterns */

/* Margin utilities */
.m-0 { margin: 0; }
.m-1 { margin: var(--spacing-1); }
.m-2 { margin: var(--spacing-2); }
.m-3 { margin: var(--spacing-3); }
.m-4 { margin: var(--spacing-4); }
.m-6 { margin: var(--spacing-6); }
.m-8 { margin: var(--spacing-8); }

/* Padding utilities */
.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-1); }
.p-2 { padding: var(--spacing-2); }
.p-3 { padding: var(--spacing-3); }
.p-4 { padding: var(--spacing-4); }
.p-6 { padding: var(--spacing-6); }
.p-8 { padding: var(--spacing-8); }

/* Gap utilities for flexbox/grid */
.gap-1 { gap: var(--spacing-1); }
.gap-2 { gap: var(--spacing-2); }
.gap-3 { gap: var(--spacing-3); }
.gap-4 { gap: var(--spacing-4); }
.gap-6 { gap: var(--spacing-6); }
.gap-8 { gap: var(--spacing-8); }