/**
 * Spacing, Border Radius & Transitions - Lavian Spa
 * Shared design tokens for consistent spacing, sizing, and animations
 */

:root {
    /* ========== SPACING SCALE ========== */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --spacing-4xl: 80px;
    --spacing-5xl: 96px;
    
    /* ========== BORDER RADIUS ========== */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-3xl: 32px;
    --radius-4xl: 40px;
    --radius-full: 9999px;
    
    /* ========== TRANSITIONS ========== */
    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slower: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Transition timing functions */
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Specific property transitions */
    --transition-colors: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    --transition-opacity: opacity 0.2s ease;
    --transition-transform: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-shadow: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== UTILITY CLASSES ========== */
/* Spacing Utilities */
.spacing-xs { margin: var(--spacing-xs); }
.spacing-sm { margin: var(--spacing-sm); }
.spacing-md { margin: var(--spacing-md); }
.spacing-lg { margin: var(--spacing-lg); }
.spacing-xl { margin: var(--spacing-xl); }

.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

/* Border Radius Utilities */
.rounded-xs { border-radius: var(--radius-xs); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Transition Utilities */
.transition-fast { transition: var(--transition-fast); }
.transition-base { transition: var(--transition-base); }
.transition { transition: var(--transition); }
.transition-slow { transition: var(--transition-slow); }
.transition-colors { transition: var(--transition-colors); }
.transition-transform { transition: var(--transition-transform); }