/*
 * Jetons du système de design « Suivi des ouvertures d'escales ».
 *
 * Source : système de marque Air Algérie (charte, page Références couleurs ; modèle de la
 * Division Commerciale) et maquettes du 15/10/2026. Les valeurs de la charte gardent leur nom
 * d'origine en commentaire. Tout ce qui n'y figure pas (thème sombre, états, ombres des éléments
 * flottants) est un choix de conception, justifié en commentaire et vérifié par
 * tests/app/test_app_interface.py (contrastes WCAG 2.2 AA dans les deux thèmes).
 *
 * Thème : html[data-theme] vaut "light", "dark" ou "auto" (même clé et mêmes valeurs que
 * l'administration de Django, pour qu'un seul choix vaille partout). "auto" suit le système.
 */

:root {
  /* Marque (charte) */
  --marque: #e32118;            /* air-red, PANTONE 485 C : aplats de marque, alertes, actions destructrices */
  --sur-marque: #ffffff;        /* texte sur la marque, 4,67:1 */
  --gris-marque: #727477;       /* air-gray, décor seulement : trop clair pour du texte sur fond teinté */
  --panneau-marque: #231f20;    /* air-black : panneau de marque (connexion), identique dans les deux thèmes */
  --sur-panneau-marque: #ffffff; /* 16:1 */

  /* Surfaces et texte, thème clair */
  --fond: #ffffff;
  --fond-retrait: #f5f5f5;      /* menu latéral, zones en retrait (maquette) */
  --fond-survol: #ececec;
  --fond-flottant: #ffffff;     /* menus, palette, notifications */
  --texte: #231f20;             /* air-black, 16:1 */
  --texte-discret: #65676a;     /* légendes : 5,2:1 sur fond-retrait (air-gray n'y fait que 4,3:1) */
  --texte-inverse: #ffffff;
  --bordure: #dedede;           /* séparations décoratives */
  --bordure-controle: #8a8a8a;  /* bords de champs et de boutons secondaires : 3,2:1 au minimum */
  --focus: #231f20;

  /* Action principale : noire, jamais rouge (spécification 19) */
  --action: #231f20;
  --action-survol: #000000;
  --sur-action: #ffffff;

  /* Statuts : la couleur double toujours un libellé, jamais seule (spécification 14.4) */
  --alerte-texte: #c00000;      /* title-red du modèle, 6,5:1, pour les textes d'alerte */
  --statut-rouge: #e32118;
  --statut-orange: #b45309;
  --statut-vert: #1f7a3a;
  --sur-statut: #ffffff;        /* 4,67:1 à 5,4:1 sur les trois aplats */
  --fond-alerte: #fdecea;
  --fond-attention: #fdf1e6;
  --fond-succes: #e8f3ec;

  /* Ombres : seulement pour ce qui flotte au-dessus de la page (menus, palette, messages).
     La charte n'en a pas ; une ombre courte y signale l'empilement, rien de plus. */
  --ombre-flottant: 0 12px 32px rgba(35, 31, 32, 0.18), 0 2px 6px rgba(35, 31, 32, 0.10);

  /* Géométrie : coins droits, comme la charte (radius-none) ; seuls les avatars sont ronds */
  --rayon: 0;
  --rayon-rond: 50%;
  --trait: 1px;
  --trait-fort: 3px;            /* soulignements actifs, barre de chargement */

  /* Espacements (multiples de 4) */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 20px;
  --e-6: 24px; --e-7: 32px; --e-8: 40px; --e-9: 48px; --e-10: 64px;

  /* Typographie : Calibri (Carlito embarquée) pour le texte, Arial pour les titres (charte) */
  --police-texte: Calibri, Carlito, "Segoe UI", Arial, sans-serif;
  --police-titre: Arial, "Liberation Sans", Helvetica, sans-serif;
  --t-xs: 12px; --t-s: 13px; --t-m: 14px; --t-base: 15px; --t-l: 16px;
  --t-xl: 18px; --t-2xl: 20px; --t-3xl: 24px; --t-4xl: 28px; --t-5xl: 36px;
  --interligne: 1.45;
  --interligne-titre: 1.15;

  /* Mouvement (spécification 19.1) : 120 à 300 ms, déplacement et opacité seulement, sans rebond */
  --duree-survol: 120ms;
  --duree-entree: 200ms;
  --duree-panneau: 250ms;
  --duree-remplissage: 400ms;
  --courbe: cubic-bezier(0.2, 0, 0, 1);

  /* Cadre d'application */
  --hauteur-barre: 60px;
  --largeur-menu: 256px;
  --largeur-contenu: 1200px;
  --cible-tactile: 44px;        /* WCAG 2.5.8 et confort au doigt */

  color-scheme: light;
}

/* Thème sombre : fonds chauds dérivés du noir de la charte, rouge de marque conservé pour les
   aplats, texte d'alerte éclairci pour rester lisible (7,2:1). */
:root[data-theme="dark"] {
  --fond: #161415;
  --fond-retrait: #1d1b1c;
  --fond-survol: #2a2728;
  --fond-flottant: #221f20;
  --texte: #f1efef;
  --texte-discret: #a9a6a7;
  --texte-inverse: #161415;
  --bordure: #333031;
  --bordure-controle: #7d797a;
  --focus: #f1efef;
  --action: #f1efef;
  --action-survol: #ffffff;
  --sur-action: #161415;
  --alerte-texte: #ff7a70;
  --fond-alerte: #3a1b19;
  --fond-attention: #35240f;
  --fond-succes: #14301f;
  --ombre-flottant: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --fond: #161415;
    --fond-retrait: #1d1b1c;
    --fond-survol: #2a2728;
    --fond-flottant: #221f20;
    --texte: #f1efef;
    --texte-discret: #a9a6a7;
    --texte-inverse: #161415;
    --bordure: #333031;
    --bordure-controle: #7d797a;
    --focus: #f1efef;
    --action: #f1efef;
    --action-survol: #ffffff;
    --sur-action: #161415;
    --alerte-texte: #ff7a70;
    --fond-alerte: #3a1b19;
    --fond-attention: #35240f;
    --fond-succes: #14301f;
    --ombre-flottant: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}