/* OtaWeb — thème : le seul fichier à modifier pour changer l'aspect du site
   (OTA-52). Couleurs, typographie, espacements et rayons sont définis ici,
   puis passés à Pico.css (variables --pico-*) et à site.css (variables
   --ota-*). Aucune autre feuille ne contient de valeur de couleur ou de
   taille de thème.

   Apparence (OTA-145) : le thème (attribut data-theme de Pico, clair ou
   sombre) et la palette (data-ota-palette) sont choisis par le bouton
   Apparence du ruban (js/appearance.js). Les palettes sont tirées du logo :
   bleu #0a5bff, vert #2cffa4, orange #ff8c1a, marine #042a6b ; le vert ne
   sert jamais de texte sur fond clair (contraste insuffisant).

   Sélecteurs : ceux des thèmes de Pico, chargés après lui, pour les
   remplacer ; les palettes viennent après les thèmes. */

/* --- Valeurs communes aux deux thèmes ----------------------------------- */
:root[data-theme] {
    --ota-grid-max-width: 75rem;
    /* Hauteur d'une ligne de grille, pour les listes de N lignes de l'accueil (OTA-89). */
    --ota-grid-row-height: 2.75rem;
    /* Largeur de la colonne de coche des grilles sélectionnables (OTA-140). */
    --ota-grid-check-width: 1.75rem;
    /* Largeur du panneau d'aide à l'ouverture (OTA-133) ; la poignée la change. */
    --ota-help-width: 24rem;
    /* Colonne Auteur du journal d'audit : le double de sa largeur d'avant (≈ 90 px), OTA-130. */
    --ota-audit-actor-width: 180px;
    /* Pastilles des palettes dans la zone Apparence (OTA-145). */
    --ota-swatch-nuage: #0a5bff;
    --ota-swatch-marine: #042a6b;
    --ota-swatch-carte: #ff8c1a;
    --ota-swatch-sobre: #ffffff;
    /* Pastille sous le logo complet de la connexion : son texte noir reste lisible en sombre (OTA-148). */
    --ota-logo-bg: #ffffff;

    --ota-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ota-font-family-mono: ui-monospace, Consolas, "Courier New", monospace;
    --ota-font-size: 100%;
    --ota-spacing: 1rem;
    --ota-radius: .25rem;

    /* Points de rupture (rappel, non utilisables dans @media : voir site.css)
       téléphone < 768 px ≤ tablette < 1200 px ≤ PC */

    /* --- Correspondance avec Pico.css ------------------------------------ */
    --pico-font-family: var(--ota-font-family);
    --pico-font-family-monospace: var(--ota-font-family-mono);
    --pico-font-size: var(--ota-font-size);
    --pico-spacing: var(--ota-spacing);
    --pico-border-radius: var(--ota-radius);
    --pico-color: var(--ota-text);
    --pico-muted-color: var(--ota-muted);
    --pico-background-color: var(--ota-background);
    --pico-card-background-color: var(--ota-panel);
    --pico-muted-border-color: var(--ota-border);
    --pico-table-border-color: var(--ota-border);
    --pico-code-background-color: var(--ota-code-bg);

    --pico-primary: var(--ota-primary);
    --pico-primary-background: var(--ota-primary);
    --pico-primary-border: var(--ota-primary);
    --pico-primary-underline: color-mix(in srgb, var(--ota-primary) 50%, transparent);
    --pico-primary-hover: color-mix(in srgb, var(--ota-primary) 80%, black);
    --pico-primary-hover-background: color-mix(in srgb, var(--ota-primary) 80%, black);
    --pico-primary-hover-border: color-mix(in srgb, var(--ota-primary) 80%, black);
    --pico-primary-hover-underline: var(--pico-primary-hover);
    --pico-primary-focus: color-mix(in srgb, var(--ota-primary) 40%, transparent);
    --pico-primary-inverse: #fff;
}

/* --- Thème clair -------------------------------------------------------- */
:root[data-theme=light] {
    --ota-primary: #0a5bff;
    --ota-danger: #c62828;
    --ota-success: #2e7d32;
    --ota-warning-bg: #fff8e1;
    --ota-danger-bg: #ffebee;
    --ota-success-bg: #e8f5e9;
    --ota-text: #1f2933;
    --ota-muted: #616e7c;
    --ota-background: #f5f7fa;
    --ota-panel: #ffffff;
    --ota-border: #d9e2ec;
    --ota-code-bg: #eef1f4;
    --ota-tag-bg: #e8eaf6;
    --ota-tag-current-bg: #c8e6c9;
    --ota-tag-deleted-bg: #ffcdd2;
    --ota-selected-bg: #eef4fa;
    --ota-grid-selected-bg: #dde1e6;
    /* Fond de la barre du mini-menu des grilles (OTA-136). */
    --ota-grid-menu-bg: #eef1f5;
}

/* --- Thème sombre ------------------------------------------------------- */
:root[data-theme=dark] {
    --ota-primary: #6f9bff;
    --ota-danger: #ff8a8a;
    --ota-success: #5be3a6;
    --ota-warning-bg: #3a3115;
    --ota-danger-bg: #3d1a1d;
    --ota-success-bg: #15301f;
    --ota-text: #e4eaf6;
    --ota-muted: #9aa7c0;
    --ota-background: #0a1224;
    --ota-panel: #111c33;
    --ota-border: #24324f;
    --ota-code-bg: #16213a;
    --ota-tag-bg: #1d2a4a;
    --ota-tag-current-bg: #1f4a33;
    --ota-tag-deleted-bg: #4a1f24;
    --ota-selected-bg: #1a2742;
    --ota-grid-selected-bg: #24324f;
    --ota-grid-menu-bg: #16213a;
    /* Texte des boutons sur le bleu clair du thème sombre. */
    --pico-primary-inverse: #0a1224;
}

/* --- Palettes : menu de gauche, filet sous le ruban, couleur principale --- */
:root[data-ota-palette=nuage] {
    --ota-menu-bg: #0a5bff;
    --ota-menu-text: #ffffff;
    --ota-menu-hover-bg: #ffffff26;
    --ota-menu-current-bg: #2cffa4;
    --ota-menu-current-text: #042a6b;
    --ota-ribbon-line: linear-gradient(#2cffa4, #2cffa4);
}

:root[data-ota-palette=marine] {
    --ota-menu-bg: #042a6b;
    --ota-menu-text: #dce6ff;
    --ota-menu-hover-bg: #ffffff1a;
    --ota-menu-current-bg: #2cffa4;
    --ota-menu-current-text: #042a6b;
    --ota-ribbon-line: linear-gradient(#2cffa4, #2cffa4);
}

:root[data-ota-palette=carte] {
    --ota-menu-bg: #042a6b;
    --ota-menu-text: #dce6ff;
    --ota-menu-hover-bg: #ffffff1a;
    --ota-menu-current-bg: #ff8c1a;
    --ota-menu-current-text: #042a6b;
    --ota-ribbon-line: linear-gradient(#ff8c1a, #ff8c1a);
}

:root[data-ota-palette=sobre] {
    --ota-menu-bg: var(--ota-panel);
    --ota-menu-text: var(--ota-text);
    --ota-menu-hover-bg: var(--ota-selected-bg);
    --ota-menu-current-bg: #042a6b;
    --ota-menu-current-text: #ffffff;
    --ota-ribbon-line: linear-gradient(90deg, #0a5bff 0 25%, #2cffa4 0 50%, #ff8c1a 0 75%, #042a6b 0);
    --ota-primary: #042a6b;
}

:root[data-theme=dark][data-ota-palette=nuage] {
    --ota-menu-bg: #0b3fb3;
}

:root[data-theme=dark][data-ota-palette=marine],
:root[data-theme=dark][data-ota-palette=carte] {
    --ota-menu-bg: #031a45;
}

:root[data-theme=dark][data-ota-palette=sobre] {
    --ota-menu-current-bg: #2cffa4;
    --ota-menu-current-text: #042a6b;
    --ota-ribbon-line: linear-gradient(90deg, #0a5bff 0 25%, #2cffa4 0 50%, #ff8c1a 0 75%, #6f9bff 0);
    --ota-primary: #6f9bff;
}