/*********************************************************************************
    SIGMA STUDIO - Variables CSS Globales
    Fichier centralisé pour éviter les redondances et conflits
*********************************************************************************/

:root {
    /* ===== COULEURS PRINCIPALES ===== */
    --primary: #ea5325;
    --primary-hover: #d14820;
    --primary-light: rgba(234, 83, 37, 0.12);
    --primary-glow: rgba(234, 83, 37, 0.3);
    
    /* ===== BACKGROUNDS ===== */
    --bg-1: #05060a;
    --bg-2: #0e0f14;
    --bg-gradient: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
    
    /* ===== TEXTE ===== */
    --text: #f6f6f8;
    --text-dark: #000000;
    --muted: rgba(246, 246, 248, 0.72);
    --text-muted: rgba(0, 0, 0, 0.75);
    
    /* ===== GLASS MORPHISM ===== */
    --glass-bg: rgba(10, 10, 10, 0.7);
    --glass-border: rgba(255, 255, 255, 0.12);
    --panel: rgba(255, 255, 255, 0.04);
    
    /* ===== EFFETS & OMBRES ===== */
    --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 15px 40px rgba(234, 83, 37, 0.4);
    --shadow-lg: 0 30px 60px rgba(2, 6, 23, 0.35);
    --shadow-xl: 0 40px 80px rgba(2, 6, 23, 0.45);
    --accent-glow: 0 20px 60px rgba(234, 83, 37, 0.18);
    
    /* ===== BORDURES & RADIUS ===== */
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 50px;
    
    /* ===== TRANSITIONS ===== */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* ===== TYPOGRAPHIE ===== */
    --font-primary: 'Oswald', sans-serif;
    --font-secondary: 'Poppins', sans-serif;
    --font-ubuntu: 'Ubuntu', sans-serif;
    
    /* ===== ESPACEMENTS ===== */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-2xl: 64px;
}

/* ===== CLASSES UTILITAIRES ===== */

/* Couleurs de texte */
.text-primary { color: var(--primary) !important; }
.text-white { color: #fff !important; }
.text-muted { color: var(--muted) !important; }

/* Backgrounds */
.bg-primary { background-color: var(--primary) !important; }
.bg-gradient { background: var(--bg-gradient) !important; }
.bg-dark-1 { background-color: var(--bg-1) !important; }
.bg-dark-2 { background-color: var(--bg-2) !important; }

/* Bordures */
.border-primary { border-color: var(--primary) !important; }
.border-glass { border: 1px solid var(--glass-border) !important; }

/* Radius */
.radius-sm { border-radius: var(--radius-sm) !important; }
.radius-md { border-radius: var(--radius-md) !important; }
.radius-lg { border-radius: var(--radius-lg) !important; }
.radius-full { border-radius: var(--radius-xl) !important; }

/* Ombres */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }

/* Transitions */
.transition-fast { transition: all var(--transition-fast) !important; }
.transition-normal { transition: all var(--transition-normal) !important; }
.transition-slow { transition: all var(--transition-slow) !important; }
.transition-bounce { transition: all var(--transition-bounce) !important; }

/* Glass Morphism Effect */
.glass-effect {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
}

/* Glow Effect */
.glow-primary {
    box-shadow: 0 0 20px var(--primary-glow);
}

.glow-hover:hover {
    box-shadow: 0 0 30px var(--primary-glow);
}

/* Accent Text (gradient) */
.text-accent {
    color: var(--primary);
    text-shadow: 0 0 30px var(--primary-glow);
}

/* Buttons Base Styles */
.btn-sigma {
    display: inline-block;
    padding: 16px 40px;
    border-radius: var(--radius-xl);
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    transition: all var(--transition-bounce);
    border: 2px solid;
}

.btn-sigma-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.btn-sigma-primary:hover {
    background: transparent;
    color: var(--primary);
    transform: translateY(-4px);
}

.btn-sigma-outline {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.btn-sigma-outline:hover {
    background: var(--primary);
    color: #fff;
    box-shadow: var(--shadow-md);
}

/* Card Styles */
.card-sigma {
    background: var(--panel);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    border: 1px solid var(--glass-border);
    transition: all var(--transition-normal);
}

.card-sigma:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

/* Section Spacing */
.section-spacing {
    padding: var(--spacing-2xl) 0;
}

.section-spacing-lg {
    padding: 100px 0;
}

/* Responsive Typography */
@media (max-width: 991px) {
    :root {
        --spacing-xl: 36px;
        --spacing-2xl: 48px;
    }
}

@media (max-width: 575px) {
    :root {
        --spacing-xl: 24px;
        --spacing-2xl: 32px;
    }
}
