/* Thèmes d'ABC Chat IA — toutes les couleurs vivent ici, nulle part ailleurs.
   Look « premium » (04/07) : fond neutre chaud, une seule couleur forte (l'orange
   ABC, volontairement un peu profond pour rester lisible et haut de gamme), le
   tricolore orange/magenta/vert réduit à une signature. Les infos techniques
   utilisent la police machine (--mono).
   Contrastes vérifiés au calcul le 2026-08-10 sur les surfaces réelles des 3 thèmes :
   les couleurs qui portent du texte tiennent ≥ 4,5:1 (seuil AA), --texte-faible est le
   seul jeton sous ce seuil et il est réservé au non-textuel (≥ 3:1). */

:root,
[data-theme='abc'] {
  color-scheme: light;
  --fond: #f7f5f2;            /* fond chaud neutre (pas beige-serif) */
  --fond-panneau: #fffefc;
  --fond-panneau-2: #fbf9f6;  /* rail, tuiles secondaires */
  --fond-message-ia: #fffefc;
  --fond-message-moi: #fdecd0; /* orange très doux */
  --fond-saisie: #fffefc;
  --fond-erreur: #fbe9e7;
  --texte: #201b16;
  --texte-doux: #6d655c;      /* 5.6:1 sur crème */
  /* --texte-faible est RÉSERVÉ au non-textuel (chevron des listes, icônes au repos, texte
     d'invite), qui relève du seuil 3:1. Tout ce qui PORTE une information — nom de l'IA,
     fiche tokens/coût, note sous la saisie, nom de dossier — utilise --texte-doux, seul
     jeton discret à tenir 4,5:1 sur TOUTES les surfaces des 3 thèmes (pire cas 4,93:1).
     Assombri de #978f85 le 2026-08-10 : il tombait à 2,93:1 sur le fond, sous le seuil. */
  --texte-faible: #948c82;    /* 3,05:1 au pire cas (non-textuel) */
  --accent: #ef8f00;          /* orange ABC premium */
  --accent-texte: #1c1305;    /* 8.9:1 sur l'orange */
  --accent-doux: #fdecd0;
  --accent-2: #d81b60;        /* magenta ABC — signature */
  --accent-3: #3f9a44;        /* vert ABC — signature */
  --etat-ok: #2e7d32;
  --bordure: #e9e4dc;
  --bordure-forte: #ded7cd;
  --danger: #c62828;
  --voile: rgba(40, 30, 20, 0.42);
  --ombre: 0 1px 2px rgba(40, 30, 20, 0.05), 0 2px 8px rgba(40, 30, 20, 0.05);
  --ombre-moyenne: 0 2px 6px rgba(40, 30, 20, 0.06), 0 10px 30px rgba(40, 30, 20, 0.09);
  --ombre-flottant: 0 6px 16px rgba(40, 30, 20, 0.08), 0 24px 60px rgba(40, 30, 20, 0.14);
  --ombre-dialogue: 0 6px 16px rgba(40, 30, 20, 0.08), 0 24px 60px rgba(40, 30, 20, 0.18);

  /* Jetons non colorés : persistent d'un thème à l'autre. */
  --mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Consolas', 'Liberation Mono', monospace;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;

  /* Le petit chevron des listes déroulantes maison (deux triangles qui se rejoignent).
     Il vit ici parce qu'il porte une couleur ; `var(--texte-faible)` est résolu chez
     l'élément qui l'utilise, donc il suit le thème tout seul. Utilisé par l'en-tête
     et par l'écran Comparer, qui doivent avoir exactement la même allure. */
  --fleche-select:
    linear-gradient(45deg, transparent 50%, var(--texte-faible) 50%),
    linear-gradient(135deg, var(--texte-faible) 50%, transparent 50%);

  /* Courbe des apparitions d'icônes (corbeille au survol, bascule lune/soleil) :
     démarrage franc, arrivée posée, sans rebond. */
  --courbe-icone: cubic-bezier(0.2, 0, 0, 1);

  /* Halo de focus des champs : le même partout (voir composants.css). */
  --halo-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

[data-theme='clair'] {
  color-scheme: light;
  --fond: #f5f6f8;
  --fond-panneau: #ffffff;
  --fond-panneau-2: #fafbfc;
  --fond-message-ia: #ffffff;
  --fond-message-moi: #e7eefb;
  --fond-saisie: #ffffff;
  --fond-erreur: #fdecea;
  --texte: #1d2430;
  --texte-doux: #5d6675;      /* 4,97:1 au pire cas (sur la bulle « moi ») */
  --texte-faible: #868f9e;    /* 3,02:1 au pire cas ; #8a93a3 tombait à 2,86:1 */
  --accent: #2f6fed;
  --accent-texte: #ffffff;    /* 4.6:1 sur le bleu */
  --accent-doux: #e7eefb;
  --accent-2: #2f6fed;
  --accent-3: #2f9e6e;
  --etat-ok: #1e7a4f;
  --bordure: #dfe4ec;
  --bordure-forte: #cdd4df;
  --danger: #c62828;
  --voile: rgba(29, 36, 48, 0.42);
  --ombre: 0 1px 2px rgba(29, 36, 48, 0.05), 0 2px 8px rgba(29, 36, 48, 0.05);
  --ombre-moyenne: 0 2px 6px rgba(29, 36, 48, 0.06), 0 10px 30px rgba(29, 36, 48, 0.09);
  --ombre-flottant: 0 6px 16px rgba(29, 36, 48, 0.08), 0 24px 60px rgba(29, 36, 48, 0.14);
  --ombre-dialogue: 0 6px 16px rgba(29, 36, 48, 0.08), 0 24px 60px rgba(29, 36, 48, 0.18);
}

[data-theme='sombre'] {
  color-scheme: dark;
  --fond: #141210;
  --fond-panneau: #1c1917;
  --fond-panneau-2: #211d1a;
  --fond-message-ia: #1c1917;
  --fond-message-moi: #3a2a10;
  --fond-saisie: #211d1a;
  --fond-erreur: #2d1717;
  --texte: #efe9e0;
  --texte-doux: #a49b90;      /* 5.9:1 sur le fond */
  --texte-faible: #7f766c;
  --accent: #f79a12;
  --accent-texte: #1a1204;    /* 9:1 sur l'orange */
  --accent-doux: #3a2a10;
  --accent-2: #ef6292;
  --accent-3: #63b567;
  --etat-ok: #7ecb82;
  --bordure: #2a2521;
  --bordure-forte: #342e28;
  --danger: #f0716e;
  --voile: rgba(0, 0, 0, 0.55);
  --ombre: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.25);
  --ombre-moyenne: 0 2px 6px rgba(0, 0, 0, 0.35), 0 10px 30px rgba(0, 0, 0, 0.45);
  --ombre-flottant: 0 6px 16px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.55);
  --ombre-dialogue: 0 6px 16px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.55);
}

/* Pastilles de l'onglet Apparence : chaque bouton de thème montre les couleurs de
   SON thème, quel que soit le thème actif. Seul endroit où des couleurs sont
   volontairement figées hors des jetons ci-dessus. */
.pastille-abc-1 { background: #ef8f00; }
.pastille-abc-2 { background: #d81b60; }
.pastille-abc-3 { background: #3f9a44; }
.pastille-clair-1 { background: #2f6fed; }
.pastille-clair-2 { background: #ffffff; }
.pastille-clair-3 { background: #1d2430; }
.pastille-sombre-1 { background: #141210; }
.pastille-sombre-2 { background: #f79a12; }
.pastille-sombre-3 { background: #ef6292; }