/* ============================================================
   DESIGN TOKENS — Vigiciel
   ------------------------------------------------------------
   Source de vérité unique du design system.
   Chargé EN PREMIER sur toutes les pages (base.html + pages
   autonomes : 404, 429, 500, banned, panel, widget).

   Règles :
   · Aucun style ici, uniquement des variables.
   · Les thèmes saisonniers (themes.css) redéfinissent
     --bg-start/--bg-end/--accent-color/--card-bg/--text-color :
     ces noms historiques restent les canoniques, les nouveaux
     tokens en dérivent pour rester compatibles.
   · Les couleurs métier (vigilance/orages) sont normées :
     ne jamais les modifier.
   Version 2.0.0
   ============================================================ */

:root {
    /* Site 100% sombre (pas de thème clair) — indique au navigateur et aux
       extensions (Dark Reader, etc.) que le rendu sombre est déjà géré,
       pour qu'elles n'appliquent pas leur propre surcouche. */
    color-scheme: dark;

    /* ----- Fond (clair, défaut) ----- */
    --bg-start: #101c33;
    --bg-end: #070d1a;

    /* ----- Surfaces ----- */
    --surface-1: rgba(20, 30, 51, 0.78);
    --surface-2: rgba(28, 40, 65, 0.85);
    --surface-solid: #111b30;
    --surface-border: rgba(148, 163, 184, 0.14);
    --surface-border-hover: rgba(34, 184, 207, 0.35);
    --surface-input: rgba(7, 13, 26, 0.6);
    --surface-inset: rgba(0, 0, 0, 0.2);

    /* ----- Chrome (navbar / footer / menu) ----- */
    --chrome-bg: #060B16;
    --chrome-text-1: #f3f7fc;
    --chrome-text-2: #c7d2e2;
    --chrome-text-3: #94a3b8;
    --chrome-border: rgba(255, 255, 255, 0.12);
    --chrome-soft: rgba(255, 255, 255, 0.06);
    --surface-grad: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%);

    /* ----- Rayons — SEULE échelle autorisée ----- */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 26px;
    --radius-full: 999px;

    /* ----- Ombres — SEULE échelle autorisée ----- */
    --shadow-1: 0 1px 2px rgba(2, 6, 23, .4), 0 2px 8px rgba(2, 6, 23, .25);
    --shadow-2: 0 4px 14px rgba(2, 6, 23, .35), 0 1px 3px rgba(2, 6, 23, .3);
    --shadow-3: 0 14px 40px -12px rgba(2, 6, 23, .6);

    /* ----- Accent (— --accent-color est le nom canonique,
             redéfini par les thèmes saisonniers) ----- */
    --accent-color: #22b8cf;
    --accent: var(--accent-color);
    --accent-2: #0e7490;
    --accent-grad: linear-gradient(135deg, #22b8cf 0%, #0e7490 100%);
    --accent-glow: rgba(34, 184, 207, 0.28);
    --accent-soft: rgba(34, 184, 207, 0.13);
    --on-accent: #03181c;
    --ring: 0 0 0 3px rgba(34, 184, 207, 0.35);

    /* ----- Texte ----- */
    --text-primary: #f3f7fc;
    --text-secondary: #c7d2e2;
    --text-muted: #94a3b8;

    /* ----- Typo ----- */
    --font-body: 'Poppins', system-ui, sans-serif;
    --font-display: 'Space Grotesk', 'Lexend', 'Poppins', system-ui, sans-serif;

    /* ----- Espacement (échelle 4px) ----- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    /* ----- Mouvement / dimensions ----- */
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --navbar-height: 70px;

    /* ============================================================
       COULEURS MÉTIER (normées — ne pas modifier)
       ============================================================ */

    /* Vigilance */
    --vigilance-none: #31AA35;
    --vigilance-etude: #e8d5b0;
    --vigilance-moderee: #ffd400;
    --vigilance-renforcee: #f97316;
    --vigilance-absolue: #CC0002;

    /* Orages — accentuation (panel) */
    --color-orages: #facc15;

    /* Orages — niveaux (frises) */
    --vigilance-orage-faible: #FDECA6;
    --vigilance-orage-modere: #FFF600;
    --vigilance-orage-fort: #FFB82B;
    --vigilance-orage-violent: #CC0000;
    --vigilance-orage-extreme: #a855f7;

    /* Orages — dégradé vert (carte J+1) */
    --orage-vert-1: #62da00;
    --orage-vert-2: #1FA800;
    --orage-vert-3: #007122;
    --orage-vert-4: #004829;
    --orage-vert-5: #052f00;

    /* Orages — pourcentages (onglet Orages) */
    --orage-pct-5:  #facc15;
    --orage-pct-20: #f59e0b;
    --orage-pct-40: #f97316;
    --orage-pct-60: #ef4444;
    --orage-pct-80: #dc2626;

    --vigilance-orage-j1-15: var(--orage-pct-5);
    --vigilance-orage-j1-25: var(--orage-pct-20);
    --vigilance-orage-j1-45: var(--orage-pct-40);
    --vigilance-orage-j1-65: var(--orage-pct-60);
    --vigilance-orage-j1-85: var(--orage-pct-80);

    /* ============================================================
       ALIAS DE COMPATIBILITÉ (anciens noms utilisés par les
       feuilles existantes et themes.css — pointent vers les
       nouveaux tokens, ne pas utiliser dans du nouveau code)
       ============================================================ */
    --glass-bg: var(--surface-1);
    --glass-bg-hover: var(--surface-2);
    --glass-border: 1px solid var(--surface-border);
    --glass-shadow: var(--shadow-2);
    --backdrop-blur: blur(14px);
    --radius-card: var(--radius-lg);
    --radius-card-archives: var(--radius-lg);
    --radius-btn: var(--radius-sm);
    --transition-smooth: var(--transition);
    --card-bg: var(--surface-1);
    --border-color: var(--surface-border);
}