/* ============================================================
   tokens.css — Variables CSS partagées entre tous les barreaux
   ------------------------------------------------------------
   Chargé depuis fragments/head.html APRÈS Bootstrap, AVANT le
   thème (BLEU/JAUNE/ROUGE.css) et AVANT ${STYLE_INLINE}.

   Convention : seules les variables sont définies ici. Les
   classes (composants) sont dans site.css. Les couleurs par
   défaut sont le thème BLEU — un thème (BLEU/JAUNE/ROUGE) peut
   override les variables --theme-* pour personnaliser un barreau.
   ============================================================ */

:root {
    /* Espacement */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* Élévations */
    --shadow-1: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
    --shadow-2: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
    --shadow-3: 0 16px 40px rgba(15,23,42,.12);

    /* Surfaces neutres (indépendantes du thème) */
    --surface: #ffffff;
    --surface-muted: #F7F8FA;
    --surface-soft: #FAFBFC;
    --border: #E5E7EB;
    --border-strong: #D1D5DB;
    --text: #1F2937;
    --text-muted: #6B7280;
    --text-subtle: #9CA3AF;

    /* Typographie */
    --font-serif: 'Crimson Text', Georgia, serif;
    --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Couleurs thème — par défaut BLEU
       Override dans BLEU/JAUNE/ROUGE.css pour personnaliser */
    --theme-primary: #1D3483;
    --theme-primary-dark: #0A163E;
    --theme-primary-hover: #3760EA;
    --theme-on-primary: #FFFFFF;
    --theme-tint: #E8EBF7;
    --theme-tint-strong: #C9D1ED;
    --theme-accent-soft: #FFE1DC;
    --theme-accent-text: #C94B37;
}