/* =====================================================================
   Charte graphique — variables (thème clair par défaut, sombre ensuite)
   Tous les contrastes texte/fond respectent WCAG AA (4,5:1).
   ===================================================================== */
:root {
  color-scheme: light;

  /* Couleurs de marque */
  --c-primaire: #4F46E5;
  --c-primaire-fort: #4338CA;
  --c-primaire-texte: #3730A3;
  --c-primaire-doux: #EEF2FF;
  --c-primaire-trait: #C7D2FE;
  --c-sur-primaire: #FFFFFF;

  /* Surfaces et texte */
  --c-fond: #F8FAFC;
  --c-surface: #FFFFFF;
  --c-surface-2: #F1F5F9;
  --c-trait: #E2E8F0;
  --c-trait-fort: #CBD5E1;
  --c-texte: #0F172A;
  --c-texte-2: #334155;
  --c-texte-doux: #475569;

  /* États */
  --c-succes: #15803D;      --c-succes-fond: #DCFCE7;   --c-succes-texte: #166534;
  --c-attention: #D97706;   --c-attention-fond: #FEF3C7; --c-attention-texte: #92400E;
  --c-danger: #B91C1C;      --c-danger-fond: #FEE2E2;   --c-danger-texte: #991B1B;

  /* Typographie */
  --police: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-xs: 0.75rem;   /* 12 px */
  --t-sm: 0.875rem;  /* 14 px */
  --t-md: 1rem;      /* 16 px */
  --t-lg: 1.125rem;  /* 18 px */
  --t-xl: 1.75rem;   /* 28 px */
  --t-2xl: 2.5rem;   /* 40 px */

  /* Espacements (grille de 8 px) */
  --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem;
  --e-5: 1.25rem; --e-6: 1.5rem; --e-8: 2rem;   --e-10: 2.5rem;

  /* Formes */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-rond: 999px;
  --ombre: 0 1px 2px rgba(15, 23, 42, 0.04);
  --ombre-haute: 0 10px 30px rgba(15, 23, 42, 0.08);

  --cible-min: 44px;      /* taille minimale d'une zone cliquable */
  --duree: 180ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-primaire: #818CF8;
    --c-primaire-fort: #A5B4FC;
    --c-primaire-texte: #C7D2FE;
    --c-primaire-doux: #1E1B4B;
    --c-primaire-trait: #3730A3;
    --c-sur-primaire: #0F172A;
    --c-fond: #0B1220;
    --c-surface: #111A2E;
    --c-surface-2: #1A2540;
    --c-trait: #24314F;
    --c-trait-fort: #334366;
    --c-texte: #F1F5F9;
    --c-texte-2: #CBD5E1;
    --c-texte-doux: #94A3B8;
    --c-succes: #4ADE80;    --c-succes-fond: #052E16;   --c-succes-texte: #86EFAC;
    --c-attention: #FBBF24; --c-attention-fond: #3B2A05; --c-attention-texte: #FCD34D;
    --c-danger: #F87171;    --c-danger-fond: #3F0D0D;   --c-danger-texte: #FCA5A5;
    --ombre: 0 1px 2px rgba(0, 0, 0, 0.3);
    --ombre-haute: 0 10px 30px rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --c-primaire: #818CF8;
  --c-primaire-fort: #A5B4FC;
  --c-primaire-texte: #C7D2FE;
  --c-primaire-doux: #1E1B4B;
  --c-primaire-trait: #3730A3;
  --c-sur-primaire: #0F172A;
  --c-fond: #0B1220;
  --c-surface: #111A2E;
  --c-surface-2: #1A2540;
  --c-trait: #24314F;
  --c-trait-fort: #334366;
  --c-texte: #F1F5F9;
  --c-texte-2: #CBD5E1;
  --c-texte-doux: #94A3B8;
  --c-succes: #4ADE80;    --c-succes-fond: #052E16;   --c-succes-texte: #86EFAC;
  --c-attention: #FBBF24; --c-attention-fond: #3B2A05; --c-attention-texte: #FCD34D;
  --c-danger: #F87171;    --c-danger-fond: #3F0D0D;   --c-danger-texte: #FCA5A5;
  --ombre: 0 1px 2px rgba(0, 0, 0, 0.3);
  --ombre-haute: 0 10px 30px rgba(0, 0, 0, 0.4);
}