/* Thèmes mi-jour et nuit de la vue timeline (html.cpath) et de ses popups.
 *
 * Pourquoi un dossier à part : course-path.css, course-hero.css et mission-panel.css ont leurs
 * couleurs en dur et sont pensés pour le jour. On n'y touche pas : le jour reste strictement
 * identique, et le thème se retire en supprimant ces fichiers.
 *
 * Fonctionnement : ce fichier ne définit que des palettes (--pt-*). Les autres fichiers du dossier
 * écrivent chaque règle une seule fois, sous html.cpath:is(.midday, .night) ; seul le jeu de
 * variables change d'un thème à l'autre. Les classes midday / night sont posées sur <html> par le
 * script de thème du <head> de player.html.php, avant le premier rendu.
 *
 * Portée : html.cpath uniquement. L'ancienne page de cours n'a pas cette classe, donc rien ne
 * change pour elle. */

/* ---------- Mi-jour : mauve et bleu, surfaces claires teintées ---------- */
html.cpath.midday {
  --pt-page: linear-gradient(#f4dff0, #e8daf8, #d8dcfd, #c9e5ff, #bfeffa);
  --pt-bar: linear-gradient(181deg, rgb(244 232 250 / 72%), rgb(228 226 252 / 62%));
  --pt-shell: linear-gradient(#efdff5, #e4dcfb, #d7e3fd, #ceedfb);
  --pt-surface: #fbf9ff;
  --pt-surface-2: #f1edfb;
  --pt-surface-3: #e3ddf5;
  --pt-ink: #231f4e;
  --pt-ink-2: #4a4775;
  --pt-ink-3: #636089;
  --pt-line: rgb(90 85 163 / 18%);
  --pt-line-strong: rgb(90 85 163 / 36%);
  --pt-veil: rgb(56 40 110 / 38%);
  --pt-accent: #08818e;
  --pt-accent-ink: #066b76;
  --pt-accent-soft: rgb(8 129 142 / 12%);
  --pt-red: #c23a28;
  --pt-red-soft: rgb(226 90 70 / 13%);
  --pt-gold: #8f5a0a;
  --pt-gold-soft: rgb(245 170 60 / 20%);
  --pt-path: rgb(255 255 255 / 88%);
  --pt-shadow: 0 6px 16px rgb(70 50 130 / 18%);
  --pt-card-shadow: 0 5px 15px rgb(56 40 110 / 32%);
  --pt-scroll: rgb(90 85 163 / 40%);
}

/* ---------- Nuit : ciel bleu nuit, mêmes valeurs de surface que les modales Réglages ---------- */
html.cpath.night {
  --pt-page: linear-gradient(#0f1626, #141d33 38%, #1b2340 72%, #29294a);
  --pt-bar: linear-gradient(181deg, rgb(24 32 50 / 86%), rgb(20 27 43 / 78%));
  --pt-shell: linear-gradient(#262f49, #1f2840 55%, #1a2236);
  --pt-surface: #1c2433;
  --pt-surface-2: #252f42;
  --pt-surface-3: #303c53;
  --pt-ink: #eef2f7;
  --pt-ink-2: #b9c4d0;
  --pt-ink-3: #95a2b1;
  --pt-line: rgb(255 255 255 / 10%);
  --pt-line-strong: rgb(255 255 255 / 24%);
  --pt-veil: rgb(5 9 20 / 66%);
  --pt-accent: #3fc9c3;
  --pt-accent-ink: #7ae0db;
  --pt-accent-soft: rgb(63 201 195 / 16%);
  --pt-red: #ff9c8c;
  --pt-red-soft: rgb(255 101 80 / 16%);
  --pt-gold: #ffc96b;
  --pt-gold-soft: rgb(255 180 60 / 16%);
  --pt-path: rgb(255 255 255 / 36%);
  --pt-shadow: 0 6px 16px rgb(0 0 0 / 42%);
  --pt-card-shadow: 0 8px 26px rgb(0 0 0 / 60%);
  --pt-scroll: rgb(255 255 255 / 26%);
}
/* Barres de défilement et contrôles natifs : pas sur la vue d'avant la timeline, restée claire. */
html.cpath.night:not(.cpath-home) {
  color-scheme: dark;
}

/* ---------- Variables existantes du chemin, reprises par ses règles de base ---------- */
html.cpath:is(.midday, .night) {
  --cp-card-bg: var(--pt-shell);
  --cp-card-line: var(--pt-line);
  --cp-card-shadow: var(--pt-card-shadow);
  --cp-white-shadow: none;
  --cp-veil: var(--pt-veil);
  --cp-veil-page: var(--pt-page);
}
html.cpath:is(.midday, .night) #course-path {
  --cp-ink: var(--pt-ink);
  --cp-muted: var(--pt-ink-3);
}