/**
 * tokens.css - Design Tokens globaux
 * Variables CSS utilisées par les composants CMS et les thèmes.
 * Chargé une fois dans public/index.php.
 * 
 * Structure:
 * - :root { ... }          → Valeurs par défaut (thème dark)
 * - .theme-dark { ... }    → Variables thème sombre explicite
 * - .theme-light { ... }   → Variables thème clair
 * 
 * Usage: <section class="cms-section collections-gallery theme-dark">
 *        Les enfants héritent les variables du thème choisi.
 */

:root {
    /* === COULEURS (Thème sombre par défaut) === */
    --color-bg:         #0d0d1a;
    --color-surface:    rgba(20, 20, 30, 0.85);
    --color-surface-alt: rgba(30, 30, 50, 0.9);
    --color-bg-primary: #1a1a2e;
    --color-bg-secondary: rgba(20, 20, 30, 0.8);
    
    --color-text-primary:   #ecf0f1;
    --color-text-secondary: #a0aec0;
    --color-text:           #ecf0f1;
    --color-text-muted:     #a0aec0;
    
    --color-accent:         #00cfff;
    --color-accent-alt:     #00e5ff;
    --color-accent-hover:   #00e5ff;
    
    --color-border:         rgba(0, 207, 255, 0.35);
    --color-border-hover:   rgba(0, 229, 255, 0.7);
    
    --color-error:          #e74c3c;
    --color-error-bg:       rgba(231, 76, 60, 0.1);
    --color-success:        #34d399;
    --color-success-bg:     rgba(52, 211, 153, 0.1);
    --color-warning:        #f59e0b;
    --color-warning-bg:     rgba(245, 158, 11, 0.1);

    /* === ESPACEMENT === */
    --space-xs:   4px;
    --space-sm:   8px;
    --space-md:   16px;
    --space-lg:   24px;
    --space-xl:   40px;
    --space-xxl:  64px;

    /* === BORDURES & EFFETS === */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    
    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:    0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg:    0 10px 15px rgba(0, 0, 0, 0.2);
    --shadow-glow:  0 0 20px rgba(0, 207, 255, 0.4);
    --shadow-glow-hover: 0 0 30px rgba(0, 207, 255, 0.6);

    /* === TYPOGRAPHIE === */
    --font-size-xs:   0.75rem;
    --font-size-sm:   0.85rem;
    --font-size-base: 0.95rem;
    --font-size-lg:   1.2rem;
    --font-size-xl:   1.5rem;
    --font-size-xxl:  2rem;
    
    --font-weight-light:   300;
    --font-weight-normal:  400;
    --font-weight-semibold: 600;
    --font-weight-bold:    700;

    /* === TRANSITIONS & ANIMATIONS === */
    --transition-fast:   0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow:   0.5s ease;
}

/* ===================================
   THÈME SOMBRE (défaut, explicite)
   =================================== */
.theme-dark {
    --color-bg:         #0d0d1a;
    --color-surface:    rgba(20, 20, 30, 0.85);
    --color-surface-alt: rgba(30, 30, 50, 0.9);
    --color-bg-primary: #1a1a2e;
    --color-bg-secondary: rgba(20, 20, 30, 0.8);
    
    --color-text-primary:   #ecf0f1;
    --color-text-secondary: #a0aec0;
    --color-text:           #ecf0f1;
    --color-text-muted:     #a0aec0;
    
    --color-accent:         #00cfff;
    --color-accent-alt:     #00e5ff;
    --color-accent-hover:   #00e5ff;
    
    --color-border:         rgba(0, 207, 255, 0.35);
    --color-border-hover:   rgba(0, 229, 255, 0.7);
    
    --color-error:          #e74c3c;
    --color-error-bg:       rgba(231, 76, 60, 0.1);
    --color-success:        #34d399;
    --color-success-bg:     rgba(52, 211, 153, 0.1);
    --color-warning:        #f59e0b;
    --color-warning-bg:     rgba(245, 158, 11, 0.1);
}

/* ===================================
   THÈME CLAIR
   =================================== */
.theme-light {
    --color-bg:         #f9fafb;
    --color-surface:    rgba(255, 255, 255, 0.95);
    --color-surface-alt: rgba(240, 245, 250, 0.9);
    --color-bg-primary: #f3f4f6;
    --color-bg-secondary: rgba(240, 245, 250, 0.8);
    
    --color-text-primary:   #1f2937;
    --color-text-secondary: #6b7280;
    --color-text:           #1f2937;
    --color-text-muted:     #9ca3af;
    
    --color-accent:         #0891b2;
    --color-accent-alt:     #0e7490;
    --color-accent-hover:   #0e7490;
    
    --color-border:         rgba(0, 100, 180, 0.3);
    --color-border-hover:   rgba(0, 100, 180, 0.6);
    
    --color-error:          #dc2626;
    --color-error-bg:       rgba(220, 38, 38, 0.1);
    --color-success:        #16a34a;
    --color-success-bg:     rgba(22, 163, 74, 0.1);
    --color-warning:        #ea580c;
    --color-warning-bg:     rgba(234, 88, 12, 0.1);
}