/*
 * Design tokens du site vitrine et de l'application : seul fichier autorisé à contenir des couleurs littérales
 * (vérifié par scripts/verifier-couleurs.mjs).
 *
 * - Primitifs : les teintes brutes, nommées par couleur. Ne pas les utiliser directement dans les pages.
 * - Sémantiques : le rôle d'une couleur (surface, texte-doux, accent…), redéfini en mode sombre.
 *   Les composants, les pages et vitrine.css ne consomment que ce niveau.
 * Exposés à Tailwind par le bloc @theme inline de global.css (bg-surface, text-texte-doux, border-bordure…).
 *
 * L'application Blazor lit aussi ce fichier (E15) : servi en css/tokens.css et embarqué dans Ekolia.Web, où
 * Services/Jetons.cs construit le thème MudBlazor. Les couleurs lues par le thème doivent donc rester en hex
 * ou en rgba() ; le mode sombre est la classe .dark sur <html> dans les deux cas.
 */
:root {
  /* ---------- Primitifs ---------- */
  --indigo-50: #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-200: #c7d2fe;
  --indigo-300: #a5b4fc;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;
  --indigo-800: #3730a3;
  --indigo-900: #312e81;
  /* Indigo très sombre : fond teinté de l'accent en mode sombre (application). */
  --indigo-nuit: #2a2d52;

  --violet-300: #c4b4ff;
  --violet-400: #c4b5fd;
  --violet-600: #7c3aed;

  --mauve-100: #f3e8ff;
  --mauve-200: #e9d5ff;
  --mauve-300: #d8b4fe;
  --mauve-500: #a855f7;
  --mauve-800: #6b21a8;

  --corail-50: #fff7ed;
  --corail-200: #fed7aa;
  --corail-300: #fdba74;
  --corail-400: #fb923c;
  --corail-500: #f97316;
  --corail-800: #9a3412;

  --ambre-200: #fde68a;
  --ambre-300: #fcd34d;
  --ambre-400: #fbbf24;
  --ambre-500: #f59e0b;
  --ambre-700: #b45309;

  --teal-200: #99f6e4;
  --teal-400: #2dd4bf;
  --teal-500: #14b8a6;
  --teal-600: #0d9488;
  --teal-800: #115e59;

  --rose-400: #f472b6;
  --rose-600: #db2777;

  --vert-300: #6ee7b7;
  --vert-400: #4ade80;
  --vert-600: #16a34a;
  --vert-700: #15803d;

  --rouge-200: #fecaca;
  --rouge-300: #fca5a5;
  --rouge-400: #f87171;
  --rouge-600: #dc2626;
  --rouge-700: #b91c1c;
  --rouge-800: #991b1b;

  --bleu-400: #38bdf8;
  --bleu-700: #0369a1;

  /* Neutres (gris Tailwind 4 convertis en hex depuis oklch, écart ≤ 1 unité RGB : le thème MudBlazor ne lit que hex et rgba). */
  --gris-50: #f9fafb;
  --gris-100: #f3f4f6;
  --gris-200: #e5e7eb;
  --gris-300: #d1d5dc;
  --gris-400: #99a1af;
  --gris-500: #6a7282;
  --gris-600: #4a5565;
  --gris-700: #364153;
  --gris-900: #101828;
  --gris-950: #030712;

  /* Neutres de la marque (légèrement bleutés). */
  --nuit-950: #07071a;
  --nuit-900: #0b0b1f;
  --nuit-700: #23233b;
  --nuit-500: #5b5b76;
  --nuit-400: #8a8aa3;
  --lavande-300: #e6e4f0;
  --lavande-200: #eeecf8;
  --lavande-100: #f6f5fb;
  --lavande-50: #f7f7fb;
  --ardoise-950: #0f1117;
  --ardoise-925: #12141c;
  --ardoise-900: #171a23;
  --ardoise-800: #232734;
  --ardoise-700: #2a2f3c;
  --ardoise-400: #7c8293;
  --gris-clair-100: #f3f4f6;
  --gris-clair-200: #e5e7eb;
  --gris-clair-400: #9ca3af;

  /* Pastilles de fenêtre macOS des maquettes. */
  --fenetre-rouge: #ff6159;
  --fenetre-jaune: #ffbd2e;
  --fenetre-vert: #28c941;

  /* ---------- Sémantiques : mode clair ---------- */
  color-scheme: light;

  --fond: #ffffff;
  --fond-2: var(--lavande-100);
  --fond-3: var(--lavande-200);
  --surface: #ffffff;
  /* Zone en retrait (champ de recherche, sélecteur) : plus sombre que la page en clair, plus claire en sombre. */
  --fond-retrait: var(--lavande-50);

  --titre: var(--nuit-900);
  --texte: var(--gris-900);
  --texte-moyen: var(--gris-700);
  --texte-doux: var(--gris-600);
  --texte-faible: var(--nuit-400);
  --bordure: var(--gris-200);
  /* Bordure des champs de formulaire, plus marquée que celle des cartes. */
  --bordure-forte: var(--gris-300);
  /* Fond d'un bouton neutre au survol. */
  --survol: var(--gris-50);

  /* Fond de marque des héros et bandeaux : identique dans les deux modes. */
  --encre: var(--nuit-900);
  --encre-profonde: var(--nuit-950);

  --accent: var(--indigo-600);
  --accent-texte: var(--indigo-600);
  --secondaire: var(--violet-600);
  --secondaire-texte: var(--violet-600);

  /* États, lus aussi par le thème de l'application (Services/Theme.cs). */
  --succes: var(--vert-700);
  --alerte: var(--ambre-700);
  --danger: var(--rouge-700);
  --info: var(--bleu-700);

  --degrade-marque: linear-gradient(120deg, var(--indigo-600) 0%, var(--violet-600) 50%, var(--corail-500) 100%);
  /* Variante éclaircie du dégradé pour le texte sur fond sombre (contraste). */
  --degrade-marque-clair: linear-gradient(120deg, var(--indigo-300) 0%, var(--mauve-300) 45%, var(--corail-300) 100%);
  --ombre: 0 1px 2px rgba(20, 16, 60, 0.06), 0 12px 32px -12px rgba(20, 16, 60, 0.18);
  --ombre-forte: 0 2px 4px rgba(20, 16, 60, 0.08), 0 40px 80px -24px rgba(20, 16, 60, 0.35);
  --rayon-carte: 20px;
  /* Intensité des fonds teintés (élément actif, survol, pastille) : plus forte en sombre pour rester visible. */
  --teinte-fond: 10%;

  /* ---------- Application (src/Ekolia.Web) : rôles propres au thème MudBlazor ---------- */
  /* Fond des pages de l'application, en léger retrait sous les cartes. */
  --fond-app: var(--lavande-50);
  --accent-fonce: var(--indigo-700);
  --accent-pale: var(--indigo-100);
  --tertiaire: var(--teal-600);
  /* Contour des champs : contraste ≥ 2,5:1, plus marqué que bordure-forte. */
  --bordure-champ: var(--gris-clair-400);
  --icone-nav: var(--gris-500);
  --squelette: var(--lavande-300);
  /* Bandeau de supervision du superadmin : identique dans les deux modes (texte blanc). */
  --supervision: var(--ambre-700);
  /* Rayon des cartes, papiers « Outlined » et tables de l'application (plus dense que rayon-carte du site). */
  --rayon-panneau: 16px;

  /* ---------- Application — couleurs de classe (E13) ---------- */
  /* 12 teintes, contraste ≥ 3:1 sur la surface (clair et sombre). Usage : style="--cc:var(--classe-N)". */
  --classe-0: #2563eb;
  --classe-1: #b45309;
  --classe-2: #059669;
  --classe-3: #e11d48;
  --classe-4: #7c3aed;
  --classe-5: #db2777;
  --classe-6: #0891b2;
  --classe-7: #4d7c0f;
  --classe-8: #ea580c;
  --classe-9: #4f46e5;
  --classe-10: #0d9488;
  --classe-11: #a16207;
}

/* ---------- Sémantiques : mode sombre (classe .dark sur <html>, posée par Base.astro) ---------- */
.dark {
  color-scheme: dark;

  --fond: var(--ardoise-950);
  --fond-2: var(--ardoise-925);
  --fond-3: var(--ardoise-800);
  --surface: var(--ardoise-900);
  --fond-retrait: var(--ardoise-900);

  --titre: var(--gris-clair-100);
  --texte: var(--gris-100);
  --texte-moyen: var(--gris-300);
  --texte-doux: var(--gris-400);
  --texte-faible: var(--ardoise-400);
  --bordure: var(--ardoise-700);
  --bordure-forte: var(--ardoise-700);
  --survol: rgba(255, 255, 255, 0.05);

  --accent-texte: var(--indigo-400);
  --secondaire-texte: var(--violet-300);

  --succes: var(--vert-400);
  --alerte: var(--ambre-400);
  --danger: var(--rouge-400);
  --info: var(--bleu-400);

  --ombre: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  --ombre-forte: 0 2px 4px rgba(0, 0, 0, 0.3), 0 40px 80px -24px rgba(0, 0, 0, 0.7);
  --teinte-fond: 15%;

  /* ---------- Application ---------- */
  --fond-app: var(--ardoise-950);
  --accent-fonce: var(--indigo-500);
  --accent-pale: var(--indigo-nuit);
  --tertiaire: var(--teal-400);
  --bordure-champ: var(--gris-600);
  --icone-nav: var(--gris-clair-400);
  --squelette: var(--ardoise-800);

  /* ---------- Application — couleurs de classe (E13) ---------- */
  --classe-0: #60a5fa;
  --classe-1: #fbbf24;
  --classe-2: #34d399;
  --classe-3: #fb7185;
  --classe-4: #a78bfa;
  --classe-5: #f472b6;
  --classe-6: #22d3ee;
  --classe-7: #a3e635;
  --classe-8: #fb923c;
  --classe-9: #818cf8;
  --classe-10: #2dd4bf;
  --classe-11: #facc15;
}