/* =============================================================================
   TOKENS.CSS — Source de vérité unique des variables CSS
   =============================================================================
   Chargé en premier sur toutes les pages, avant main.css et app.css.
   Ne contient QUE des déclarations :root avec des valeurs primitives.
   Pas d'alias var() chaînés — toutes les valeurs doivent être résolvables
   directement (nécessaire pour la sync avec design.json via PHP).

   Généré/synchronisé automatiquement vers design.json par emails/common.php
   (comparaison filemtime — sync uniquement si tokens.css est plus récent).
   ============================================================================= */

:root {

    /* ── Couleurs primitives ─────────────────────────────────────────────── */
    --color-blue:        rgba(102, 126, 234, 1);
    --color-blue-glass:  rgba(102, 126, 234, 0.75);
    --color-green:       rgba(69,  186, 128, 1);
    --color-orange:      rgba(255, 159,  64, 1);
    --color-red:         rgba(255, 107, 107, 1);
    --color-purple:      rgba(118,  75, 162, 1);

    --color-primary:       rgba(102, 126, 234, 1);
    --color-primary-glass: rgba(102, 126, 234, 0.75);
    --color-success:       rgba(69,  186, 128, 1);
    --color-success-glass: rgba(69,  186, 128, 0.75);
    --color-warning:       rgba(255, 159,  64, 1);
    --color-warning-glass: rgba(255, 159,  64, 0.75);
    --color-danger:        rgba(255, 107, 107, 1);
    --color-danger-glass:  rgba(255, 107, 107, 0.75);

    /* ── Surfaces (thème sombre) ─────────────────────────────────────────── */
    --bg:         #0f0f1a;
    --surface:    #1a1a2e;
    --surface-2:  #13132a;
    --surface-3:  #1e1e3a;

    --surface-glass:   rgba(20, 20, 42, 0.72);
    --surface-2-glass: rgba(14, 14, 36, 0.65);
    --surface-3-glass: rgba(24, 24, 48, 0.78);

    /* ── Bordures ────────────────────────────────────────────────────────── */
    --border:              #2a2a4a;
    --border-mid:          #3a3a5a;
    --border-glass:        rgba(42, 42, 74, 0.70);
    --border-white-subtle: rgba(255, 255, 255, 0.15);

    /* ── Texte ───────────────────────────────────────────────────────────── */
    --text:          #e0e0f0;
    --text-sub:      #ccc;
    --text-muted:    rgba(255, 255, 255, 0.40);
    --text-dim:      #555;
    --text-dark:     #222;
    --text-white-sub: rgba(255, 255, 255, 0.80);
    --accent:        #a0a8ff;

    /* ── Backgrounds fonctionnels (alpha) ────────────────────────────────── */
    --blue-bg:   rgba(102, 126, 234, 0.15);
    --green-bg:  rgba(69,  186, 128, 0.15);
    --orange-bg: rgba(255, 159,  64, 0.15);
    --red-bg:    rgba(255, 107, 107, 0.15);

    /* ── Overlays ────────────────────────────────────────────────────────── */
    --overlay-bg:  rgba(0, 0, 0, 0.82);
    --modal-bg:    #000;
    --hover-white: rgba(255, 255, 255, 0.18);

    /* ── Chart.js ────────────────────────────────────────────────────────── */
    --chart-grid: rgba(255, 255, 255, 0.06);

    /* ── Espacements ─────────────────────────────────────────────────────── */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;

    /* ── Border radius ───────────────────────────────────────────────────── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* ── Ombres ──────────────────────────────────────────────────────────── */
    --shadow-sm: 0 2px  4px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px  8px rgba(0, 0, 0, 0.20);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.60);

    /* ── Modal ───────────────────────────────────────────────────────────── */
    --modal-header-h: 52px;
}