/* CSS Variables - Josep CC Design System */

:root {
    /* Color Palette */
    --primary: #ff6b97;
    --secondary: #00d9c6;
    --accent: #8a4fbd;
    --dark: #2d0f45;
    --light: #ffffff;
    --light-blue: #f7f0fa;
    --medium: #8a8a8a;
    --text-dark: #4a4a4a;
    --text-light: #666666;
    --border-color: #e0e0e0;
    --warning: #ffa726;
    --success: #66bb6a;
    --error: #ef5350;
    
    /* Spacing System */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    
    /* Typography */
    --font-primary: 'Nunito', sans-serif;
    --font-heading: 'Orbitron', sans-serif;
    --font-mono: 'VT323', monospace;
    
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;
    --font-size-4xl: 32px;
    --font-size-5xl: 36px;
    --font-size-6xl: 48px;
    
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;
    --line-height-loose: 1.75;
    
    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 15px;
    --radius-2xl: 20px;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 4px 4px 0 rgba(45, 15, 69, 0.08);
    --shadow-lg: 6px 6px 0 rgba(45, 15, 69, 0.08), 0 0 25px rgba(0, 0, 0, 0.05);
    --shadow-xl: 10px 10px 0 rgba(45, 15, 69, 0.1), 0 0 35px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 8px 25px rgba(255, 107, 151, 0.3);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.4s ease;
    
    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-toast: 800;
    
    /* Breakpoints (for reference in media queries) */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;
    
    /* Container Widths */
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-2xl: 1320px;
    
    /* Grid System */
    --grid-gap: 30px;
    --grid-gap-sm: 20px;
    --grid-gap-lg: 40px;
}

/* Dark Mode Variables (for future use) */
[data-theme="dark"] {
    --dark: #ffffff;
    --light: #1a1a1a;
    --light-blue: #2a2a2a;
    --text-dark: #e0e0e0;
    --text-light: #cccccc;
    --border-color: #333333;
}