/* ==========================================================================
   _VARIABLES.CSS — Design Tokens du système visuel Planif.education
   ========================================================================== */

:root {

  /* ==========================================================
     PALETTE PRINCIPALE — BLEU (couleur primaire)
     ========================================================== */
   --c-bleu-200: #89acda;
     --c-bleu-500: #6999D8;
  --c-bleu-900: #08234D;
  /* ==========================================================
     PALETTE ACCENT — JAUNE
     ========================================================== */
  --c-jaune-500: #d9b40f;
    --c-jaune-900: #f1c815;

  /* ==========================================================
     PALETTE NEUTRE — GRIS BLEUTÉ (SLATE)
     ========================================================== */

  --c-slate-50:  #f6f8fc;
  --c-slate-100: #eef2f9;
  --c-slate-200: #e1e7f2;
  --c-slate-300: #cfd8e6;
  --c-slate-400: #9aa9c0;
  --c-slate-500: #6b7c96;
  --c-slate-700: #3e4c63;
  --c-slate-900: #1f2a3a;

  /* ==========================================================
     SURFACES
     ========================================================== */

  --c-fond: var(--c-slate-50);

  --c-surface-1: #ffffff;
  --c-surface-2: var(--c-slate-100);
  --c-surface-hover: var(--c-slate-200);
  --c-popup-surface: #ffffff;

  /* ==========================================================
     ACCENTS (tokens fonctionnels)
     ========================================================== */

  --c-primaire: var(--c-bleu-900);
  --c-primaire-hover: var(--c-bleu-500);

  --c-accent: var(--c-jaune-900);
  --c-accent-hover: var(--c-jaune-500);

  /* ==========================================================
     TEXTE
     ========================================================== */

  --c-titre: var(--c-bleu-900);
  --c-texte: var(--c-slate-700);
  --c-texte-clair: var(--c-slate-500);
  --c-texte-muted: var(--c-slate-400);

  /* ==========================================================
     BORDURES
     ========================================================== */

  --c-border-subtle: var(--c-slate-200);
  --c-border-strong: var(--c-slate-300);

  /* ==========================================================
     ÉTATS
     ========================================================== */

  --c-danger: #DC2626;
  --c-warning: #EAB308;
  --c-success: #16A34A;

  /* ==========================================================
     FLASH HIGHLIGHT
     ========================================================== */

  --c-flash-bg: var(--c-bleu-100);
  --c-flash-ring: var(--c-bleu-400);

  /* ==========================================================
     OMBRES
     ========================================================== */

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 20px rgba(0,0,0,0.12);

  /* ==========================================================
     RAYONS
     ========================================================== */

  --radius: 10px;
  --radius-sm: 6px;

  /* ==========================================================
     ESPACEMENTS
     ========================================================== */

  --espace-xs: 6px;
  --espace-sm: 12px;
  --espace-md: 20px;
  --espace-lg: 36px;
  --espace-xl: 56px;

  /* ==========================================================
     FONTS
     ========================================================== */

  --font-titres: 'Montserrat', sans-serif;
  --font-corps: 'Inter', sans-serif;

  /* ==========================================================
     AUTRES TOKENS
     ========================================================== */

  --c-gris-900: #1a1a1a;

}