/* ==========================================================================
   _VARIABLES.CSS - Design tokens du systeme visuel Planif.education
   ========================================================================== */

:root {
  color-scheme: light;

  /* ==========================================================
     PALETTE PRINCIPALE - BLEU
     ========================================================== */

  --c-bleu-50:  #f2f7ff;
  --c-bleu-100: #dceafe;
  --c-bleu-200: #89acda;
  --c-bleu-400: #7fa7dc;
  --c-bleu-500: #6999D8;
  --c-bleu-600: #3f73c8;
  --c-bleu-700: #275aa6;
  --c-bleu-800: #123d78;
  --c-bleu-900: #08234D;

  /* ==========================================================
     PALETTE ACCENT - JAUNE
     ========================================================== */

  --c-jaune-500: #d9b40f;
  --c-jaune-900: #f1c815;

  /* ==========================================================
     PALETTE NEUTRE - GRIS BLEUTE
     ========================================================== */

  --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-600: #53647d;
  --c-slate-700: #3e4c63;
  --c-slate-800: #2c394d;
  --c-slate-900: #1f2a3a;

  --c-gris-50: var(--c-slate-50);
  --c-gris-100: var(--c-slate-100);
  --c-gris-200: var(--c-slate-200);
  --c-gris-300: var(--c-slate-300);
  --c-gris-400: var(--c-slate-400);
  --c-gris-500: var(--c-slate-500);
  --c-gris-600: var(--c-slate-600);
  --c-gris-700: var(--c-slate-700);
  --c-gris-800: var(--c-slate-800);
  --c-gris-900: var(--c-slate-900);

  /* ==========================================================
     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-surface-alt: var(--c-slate-100);
  --c-surface-subtle: var(--c-slate-50);
  --c-surface-3: var(--c-slate-200);
  --c-popup-surface: #ffffff;

  /* ==========================================================
     ACCENTS FONCTIONNELS
     ========================================================== */

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

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

  /* ==========================================================
     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);
  --c-texte-subtil: var(--c-slate-500);
  --c-texte-secondaire: var(--c-slate-500);
  --c-texte-principal: var(--c-slate-900);
  --c-texte-fort: var(--c-slate-900);
  --text-main: var(--c-texte);

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

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

  /* ==========================================================
     ETATS
     ========================================================== */

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

  /* ==========================================================
     FOCUS ET FLASH
     ========================================================== */

  --c-flash-bg: var(--c-bleu-100);
  --c-flash-ring: var(--c-bleu-400);
  --c-focus-ring: color-mix(in srgb, var(--c-primaire) 24%, transparent);
  --c-primaire-alpha: color-mix(in srgb, var(--c-primaire) 18%, transparent);
  --c-primary: var(--c-primaire);

  /* ==========================================================
     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;
  --font-texte: var(--font-corps);

  /* ==========================================================
     ALIASES DE COMPATIBILITE
     ========================================================== */

  --radius-md: var(--radius);
  --c-bordure: var(--c-border-subtle);
  --c-surface-0: var(--c-fond);
  --c-texte-subtle: var(--c-texte-subtil);
  --c-text-secondary: var(--c-texte-secondaire);
  --c-danger-light: color-mix(in srgb, var(--c-danger) 12%, var(--c-surface-1));
  --c-rouge-700: var(--c-danger);
  --c-mauve-50: color-mix(in srgb, var(--c-primaire) 8%, var(--c-surface-1));
  --c-mauve-200: color-mix(in srgb, var(--c-primaire) 32%, var(--c-border-subtle));
  --color-text-primary: var(--c-texte);
  --color-accent-primary: var(--c-primaire);
  --color-border-light: var(--c-border-subtle);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* ==========================================================
     PALETTE SOMBRE
     ========================================================== */

  --c-bleu-50:  #101b2d;
  --c-bleu-100: #14233a;
  --c-bleu-200: #1d3559;
  --c-bleu-400: #4f82ca;
  --c-bleu-500: #3f73c8;
  --c-bleu-600: #6fa8ff;
  --c-bleu-700: #a8cbff;
  --c-bleu-800: #d2e5ff;
  --c-bleu-900: #08234D;

  --c-jaune-500: #d9b40f;
  --c-jaune-900: #f5d348;

  --c-slate-50:  #0f141f;
  --c-slate-100: #151b28;
  --c-slate-200: #202938;
  --c-slate-300: #2d394b;
  --c-slate-400: #7f8da3;
  --c-slate-500: #a8b4c7;
  --c-slate-600: #c4cedd;
  --c-slate-700: #d8e0ec;
  --c-slate-800: #e7edf7;
  --c-slate-900: #f5f8ff;

  --c-gris-50: var(--c-slate-50);
  --c-gris-100: var(--c-slate-100);
  --c-gris-200: var(--c-slate-200);
  --c-gris-300: var(--c-slate-300);
  --c-gris-400: var(--c-slate-400);
  --c-gris-500: var(--c-slate-500);
  --c-gris-600: var(--c-slate-600);
  --c-gris-700: var(--c-slate-700);
  --c-gris-800: var(--c-slate-800);
  --c-gris-900: var(--c-slate-900);

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

  --c-fond: #0f141f;
  --c-surface-1: #151b28;
  --c-surface-2: #202938;
  --c-surface-hover: #273347;
  --c-surface-alt: #1b2434;
  --c-surface-subtle: #121925;
  --c-surface-3: #2d394b;
  --c-popup-surface: #151b28;

  /* ==========================================================
     ACCENTS FONCTIONNELS
     ========================================================== */

  --c-primaire: #78aef5;
  --c-primaire-hover: #9cc5ff;
  --c-primaire-contrast: #06111f;

  --c-accent: #f5d348;
  --c-accent-hover: #d9b40f;
  --c-accent-contrast: #111827;

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

  --c-titre: #f5f8ff;
  --c-texte: #d8e0ec;
  --c-texte-clair: #c4cedd;
  --c-texte-muted: #8e9bb0;
  --c-texte-subtil: #a8b4c7;
  --c-texte-secondaire: #a8b4c7;
  --c-texte-principal: #f5f8ff;
  --c-texte-fort: #f5f8ff;
  --text-main: var(--c-texte);

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

  --c-border-subtle: #2a3548;
  --c-border-strong: #3a465b;
  --c-border: var(--c-border-subtle);

  /* ==========================================================
     ETATS
     ========================================================== */

  --c-danger: #f87171;
  --c-warning: #facc15;
  --c-success: #4ade80;

  --c-flash-bg: #1d3559;
  --c-flash-ring: #78aef5;
  --c-focus-ring: color-mix(in srgb, var(--c-primaire) 30%, transparent);
  --c-primaire-alpha: color-mix(in srgb, var(--c-primaire) 24%, transparent);
  --c-primary: var(--c-primaire);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.42);
  --shadow-md: 0 8px 18px rgba(0,0,0,0.36);
  --shadow-lg: 0 16px 36px rgba(0,0,0,0.44);
}