/* Imagilire Studio — Thème sombre (lot 4.4)
 *
 * Le réglage « Thème : Sombre » existait depuis le début et **ne faisait
 * rien** : `setTheme()` posait bien `body.theme-dark`, mais aucune règle ne
 * portait cette classe en dehors de quatorze lignes de `spell-tooltip.css`.
 * Choisir « Sombre » changeait la valeur en base et rien à l'écran.
 *
 * Le lot 4.4 demande de vérifier les couleurs de syllabes « sur fond clair
 * **et** sombre ». Sans fond sombre, la moitié du critère n'est pas
 * vérifiable : il fallait donc que le thème existe pour de bon.
 *
 * ## Ce que cette feuille couvre, et ce qu'elle ne couvre pas
 *
 * Elle redéfinit les **jetons de couleur** du `:root`. Tout ce qui les
 * consomme bascule donc sans une ligne de plus : l'éditeur Quill, l'aperçu
 * syllabé, les panneaux latéraux, les barres mobile et tablette, le pied de
 * page, l'historique, les modales. C'est l'essentiel de ce qu'on regarde en
 * lisant et en écrivant — les surfaces de lecture.
 *
 * Restent en clair cinq feuilles qui écrivent leurs couleurs en dur et n'ont
 * aucun jeton à redéfinir : `recherche.css`, `user-dictionary-modal.css`,
 * `pdf-modal.css`, et la part littérale de `spell-tooltip.css` et
 * `export-reminder.css` — environ 470 valeurs. Les reprendre relève du lot 5.4
 * (dette CSS), qui les retouchera de toute façon. En attendant, elles
 * reçoivent ci-dessous un habillage minimal : leur fond et leur texte, ce qui
 * suffit à ne pas éblouir, sans prétendre à un thème complet.
 *
 * ## Les valeurs
 *
 * Toutes vérifiées à 4,5:1 au moins contre les deux fonds sombres (#1d2228 la
 * surface, #14181c la page) par `tests/specs/contraste.spec.js` :
 *
 *     text-primary    #e8ecf1  13,49:1        primary-color   #36B1B3   6,17:1
 *     text-secondary  #c2ccd6   9,84:1        accent-color    #ff8a5c   6,89:1
 *     text-muted      #9aa5b1   6,40:1        error-color     #ff7a6b   6,29:1
 *
 *
 * ## Sur le sélecteur
 *
 * `html[data-theme="dark"]`, posé par `settings.js`, et non
 * `@media (prefers-color-scheme: dark)`. La distinction n'est pas
 * cosmétique : le thème est un **réglage de l'élève**, enregistré avec ses
 * autres préférences. Quatre feuilles suivaient jusqu'ici la préférence
 * système, ce qui rendait le pied de page sombre sous une application claire ;
 * elles ont été ramenées sur ce sélecteur.
 *
 * `[data-theme]` était par ailleurs déjà attendu par `mathquill.css` et
 * `spell-tooltip.css` — dont les règles étaient donc mortes, puisque rien ne
 * posait l'attribut.
 */

html[data-theme="dark"] {
    /* Le turquoise de la charte est **laissé tel quel**, et c'est un choix
       mesuré. Employé comme texte sur fond sombre il donne 6,17:1, largement
       au-dessus du seuil : il n'avait pas besoin d'être éclairci. L'éclaircir
       à #4ecdd0 aurait en revanche fait tomber le blanc posé dessus — l'en-tête
       de l'aperçu, les boutons primaires — de 2,59:1 à 1,91:1.
    
       Ces 2,59:1 du blanc sur turquoise sont un défaut du thème clair, pas du
       thème sombre : il vient de la charte graphique et le corriger demande
       de trancher sur la marque, ce qui dépasse le lot 4.4. Il est relevé dans
       `docs/ACCESSIBILITE.md`. Ce qu'on peut garantir ici, c'est de ne pas
       l'aggraver. */
    --primary-color: #36B1B3;
    --primary-hover: #4ecdd0;
    --secondary-color: #f7b731;
    --accent-color: #ff8a5c;
    --accent-hover: #ffa87f;

    /* Surfaces */
    --background-color: #14181c;
    --surface-color: #1d2228;
    --border-color: #333c45;

    /* Texte */
    --text-primary: #e8ecf1;
    --text-secondary: #c2ccd6;
    --text-muted: #9aa5b1;

    /* États */
    --success-color: #5fd48a;
    --warning-color: #f7b731;
    --error-color: #ff7a6b;
    --info-color: #4ecdd0;

    /* Les ombres d'un thème clair sont invisibles sur fond sombre : ce qui
       détache une carte ici, c'est une ombre plus dense et une bordure. */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.6), 0 2px 4px -2px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.7), 0 4px 6px -4px rgb(0 0 0 / 0.6);
}

/* La page elle-même. `body` n'a pas de fond déclaré dans `imagilire-studio.css`
   — il hérite du blanc du navigateur, qui ne connaît pas nos jetons. */
html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: var(--background-color);
    color: var(--text-primary);
    color-scheme: dark;
}

/* ─────────────────────────────────────────────────────────────────────────
   Quill : le DOM que nous n'écrivons pas
   ─────────────────────────────────────────────────────────────────────────

   Le thème « snow » grave ses icônes en #444 et ses libellés en #444 : sur une
   barre d'outils devenue sombre, elles disparaissent. Ces règles ne changent
   rien au thème clair. */

html[data-theme="dark"] .ql-snow .ql-stroke,
html[data-theme="dark"] .ql-snow .ql-stroke-miter {
    stroke: var(--text-secondary);
}

html[data-theme="dark"] .ql-snow .ql-fill,
html[data-theme="dark"] .ql-snow .ql-stroke.ql-fill {
    fill: var(--text-secondary);
}

html[data-theme="dark"] .ql-snow .ql-picker,
html[data-theme="dark"] .ql-snow .ql-picker-label,
html[data-theme="dark"] .ql-snow .ql-picker-item {
    color: var(--text-secondary);
}

html[data-theme="dark"] .ql-snow .ql-picker-options {
    background-color: var(--surface-color);
    border-color: var(--border-color);
}

html[data-theme="dark"] .ql-snow.ql-toolbar button:hover .ql-stroke,
html[data-theme="dark"] .ql-snow.ql-toolbar button.ql-active .ql-stroke {
    stroke: var(--primary-color);
}

html[data-theme="dark"] .ql-snow.ql-toolbar button:hover .ql-fill,
html[data-theme="dark"] .ql-snow.ql-toolbar button.ql-active .ql-fill {
    fill: var(--primary-color);
}

/* Le texte de substitution de l'éditeur vide : `.ql-blank::before` est en
   italique gris clair, illisible sur fond sombre. */
html[data-theme="dark"] .ql-editor.ql-blank::before {
    color: var(--text-muted) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Habillage minimal des feuilles écrites en dur
   ─────────────────────────────────────────────────────────────────────────

   Fond et texte seulement — de quoi ne pas se prendre un rectangle blanc en
   pleine figure. Le détail (bordures, survols, badges) attend le lot 5.4. Ces
   surfaces ne portent pas de syllabes : elles ne pèsent pas sur le critère du
   lot 4.4, mais les laisser en blanc aurait été pire que rien. */

html[data-theme="dark"] .recherche-modal,
html[data-theme="dark"] .recherche-results-container,
html[data-theme="dark"] .recherche-result-item,
html[data-theme="dark"] .pdf-modal,
html[data-theme="dark"] .pdf-modal-body,
html[data-theme="dark"] .user-dictionary-modal,
html[data-theme="dark"] .user-dictionary-modal-body,
html[data-theme="dark"] .interactive-notification {
    background: var(--surface-color);
    color: var(--text-primary);
}

html[data-theme="dark"] .recherche-search-input,
html[data-theme="dark"] .user-dictionary-add-form input[type="text"] {
    background: var(--background-color);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Quatre feuilles basculaient sur la préférence système, indépendamment du
   réglage de l'élève : le pied de page et la ligne de statistiques
   devenaient sombres sous une application restée claire. On neutralise la
   préférence système ; c'est le réglage qui décide, et lui seul. */

@media (prefers-color-scheme: dark) {
    html:not([data-theme="dark"]) .studio-footer,
    html:not([data-theme="dark"]) .studio-footer.collapsed,
    html:not([data-theme="dark"]) .studio-footer:hover {
        background-color: var(--surface-color);
        border-top-color: var(--border-color);
    }

    html:not([data-theme="dark"]) .editor-stats {
        border-top-color: var(--border-color);
        background: var(--surface-color);
        color: var(--text-secondary);
    }
}