/* ========================================
   VARIABLES.CSS
   Variables CSS de la charte graphique Mairie Saint-Clar
   Contient UNIQUEMENT des déclarations :root { }
   ======================================== */

/* ── Tokens CSS — Charte graphique Saint-Clar ── */
:root {
  /* Couleurs d'identité */
  --color-rouge:          #CC0000;
  --color-or:             #FFD112;
  --color-bleu-nuit:      #1A2A4A;

  /* Fonds */
  --color-fond-base:      #FAF8F3;
  --color-fond-subtil:    #F0EBE1;
  --color-fond-sombre:    #1A2A4A;

  /* Textes */
  --color-texte:          #1A2A4A;
  --color-texte-inverse:  #FAF8F3;
  --color-texte-discret:  #535F78;

  /* Fonctionnels */
  --color-accent:         #CC0000;
  --color-accent-doux:    #FFD112;

  /* Bordures */
  --color-bordure:        rgba(26, 42, 74, 0.12);
  --color-bordure-or:     rgba(255, 209, 18, 0.40);

  /* Statuts */
  --color-succes:         #2E7D32;
  --color-alerte:         #CC0000;
  --color-info:           #1A2A4A;

  /* Typographie */
  --font-titre:           'Playfair Display', Georgia, serif;
  --font-corps:           'Source Sans 3', system-ui, sans-serif;
  --text-xs:              0.8125rem;
  --text-sm:              0.875rem;
  --text-base:            1rem;
  --text-lg:              1.25rem;
  --text-xl:              1.5rem;
  --text-2xl:             2rem;
  --text-3xl:             3rem;
  --leading-titre:        1.2;
  --leading-corps:        1.6;
  --leading-serré:        1.1;
  --weight-regular:       400;
  --weight-medium:        500;
  --weight-semibold:      600;
  --weight-bold:          700;

  /* Espacement (module 8px) */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10: 128px;

  /* Grille */
  --grid-colonnes:        12;
  --grid-gouttiere:       clamp(16px, 2vw, 32px);
  --grid-max-width:       1200px;
  --grid-padding-x:       clamp(16px, 5vw, 80px);

  /* Rayons de bordure */
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  8px;

  /* Ombres */
  --shadow-sm:  0 1px 3px rgba(26, 42, 74, 0.08);
  --shadow-md:  0 4px 12px rgba(26, 42, 74, 0.12);
  --shadow-lg:  0 8px 32px rgba(26, 42, 74, 0.16);

  /* Transitions */
  --transition-fast:  0.15s ease;
  --transition-base:  0.25s ease;
  --transition-slow:  0.40s ease;

  /* Couleurs hover (états interactifs des couleurs identité) */
  --color-rouge-hover:      #AA0000;
  --color-or-hover:         #CF9D00;
  --color-bleu-nuit-hover:  #0f1d35;

  /* Bleu nuit plus sombre — drawer mobile, contrastes plus marqués */
  --color-bleu-nuit-sombre: #0F1B2E;

  /* Fond doux rosé — sections projets municipaux */
  --color-fond-projet:      #FEF2F2;

  /* Bordure carte — nuance plus visible que --color-bordure */
  --color-bordure-subtile:  #e8e2d8;

  /* Badges catégories associations (bg / text) */
  --badge-sport-bg:         #fde8e8;  --badge-sport-text:         #a00000;
  --badge-festivites-bg:    #fef3d0;  --badge-festivites-text:    #7a5000;
  --badge-culture-bg:       #e8effe;  --badge-culture-text:       #1a3a8f;
  --badge-environnement-bg: #e6f5ec;  --badge-environnement-text: #1e6e3a;
  --badge-education-bg:     #f0e8fe;  --badge-education-text:     #5a2080;
  --badge-neutre-bg:        #f0f0f0;  --badge-neutre-text:        #444;

  /* Statuts projets municipaux */
  --color-statut-planifie:  #6b7280;
  --color-statut-termine:   #16a34a;

  /* Couleurs externes (réseaux) */
  --color-facebook:         #1877F2;

  /* Rayon "pill" — exception charte §20 pour badges catégories */
  --radius-pill:            20px;

  /* Z-index — échelle charte §5 */
  --z-base:        0;
  --z-raised:     10;
  --z-sticky:    100;
  --z-overlay:   200;
  --z-modal:     300;
  --z-toast:     400;
  --z-tooltip:   500;
  --z-skip-link: 9999;
}