/* ============================================================================
 * Sor-sõngo — Jetons de thème partagés (12-09-2026)
 * ----------------------------------------------------------------------------
 * Copie fidèle des variables de couleur d'index.html (css/main.css + le bloc
 * Ardoise/Sombre de css/perso.css), SANS aucune règle de mise en page. Un
 * style de cadran (voir _SUIVI_STYLES_CADRAN.md) peut donc charger ce seul
 * fichier pour obtenir exactement les mêmes couleurs qu'index.html dans les
 * trois thèmes (Clair, Ardoise, Sombre) et les six accents, sans hériter des
 * règles de main.css qui imposent la mise en page de l'accueil classique.
 *
 * Recopié TEL QUEL (mêmes sélecteurs, mêmes valeurs) plutôt que résumé : les
 * couleurs réellement à l'écran dépendent d'une cascade à trois niveaux
 * (thème, accent, préférence système) qu'il aurait été facile de mal
 * reproduire en devinant des valeurs "propres". Vérifié par lecture directe
 * de getComputedStyle() sur index.html dans les trois thèmes avant d'écrire
 * ce fichier, pas par relecture du CSS seul.
 *
 * En cas de changement de palette : modifier main.css / perso.css d'abord
 * (ils pilotent l'accueil), puis reporter ici à l'identique. Ne JAMAIS
 * inventer une valeur directement ici.
 * ========================================================================== */

/* ---- Thème (main.css) ---- */
:root {
  --bg: #f6f5f2;
  --card: #ffffff;
  --text: #1f2937;
  --text-soft: #6b7280;
  --border: #d4d0c7;
  --border-strong: rgba(0, 0, 0, 0.18);
  --accent: #1f7a5c;
  --accent-hi: #27946f;
  --accent-glow: rgba(31, 122, 92, .30);
  --accent-soft: #e3f0ea;
  --warn: #c99700;
  --warn-hi: #ddad1a;
  --warn-glow: rgba(201, 151, 0, .30);
  --danger: #d64545;
  --danger-soft: #fdecec;
  --ok: #17954b;
  --track: #ecebe7;
  --shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 20px rgba(0, 0, 0, .06);
  --radius: 18px;
  --bf-red: #d9534a;
  --bf-yellow: #e8b40c;
  --bf-green: #2e8b63;
}

:root[data-theme="dark"] {
  --bg: #17191c;
  --card: #1f2226;
  --text: #eceef0;
  --text-soft: #9aa1a9;
  --border: #2c3036;
  --border-strong: rgba(255, 255, 255, 0.35);
  --accent: #3da884;
  --accent-hi: #4cc09a;
  --accent-glow: rgba(61, 168, 132, .28);
  --accent-soft: #21332c;
  --warn: #e0b93c;
  --warn-hi: #ecc95d;
  --warn-glow: rgba(224, 185, 60, .25);
  --danger: #e05c5c;
  --danger-soft: #3a2426;
  --ok: #2fb45f;
  --track: #2a2e33;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17191c;
    --card: #1f2226;
    --text: #eceef0;
    --text-soft: #9aa1a9;
    --border: #2c3036;
    --border-strong: rgba(255, 255, 255, 0.35);
    --accent: #3da884;
    --accent-hi: #4cc09a;
    --accent-glow: rgba(61, 168, 132, .28);
    --accent-soft: #21332c;
    --warn: #e0b93c;
    --warn-hi: #ecc95d;
    --warn-glow: rgba(224, 185, 60, .25);
    --danger: #e05c5c;
    --danger-soft: #3a2426;
    --ok: #2fb45f;
    --track: #2a2e33;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
  }
}

/* ---- Fond « ciel » et jetons translucides (deuxième bloc de main.css,
 * plus loin dans le fichier : il redéfinit --bg/--card/--border/--track en
 * versions translucides, et ajoute --page-solid/--veil/--sky-* pour le
 * dégradé de fond derrière tout le site). ---- */
:root {
  --page-solid: #f6f5f2;
  --veil: rgba(246, 245, 242, .90);
  --sky-top: #e6eef8;
  --sky-1: rgba(137, 180, 226, .38);
  --sky-2: rgba(255, 243, 214, .45);
  --card: rgba(255, 255, 255, .62);
  --border: rgba(255, 255, 255, .60);
  --track: rgba(31, 41, 55, .10);
  --bg: rgba(255, 255, 255, .38);
}

:root[data-theme="dark"] {
  --page-solid: #17191c;
  --veil: rgba(15, 17, 20, .92);
  --sky-top: #17191c;
  --sky-1: transparent;
  --sky-2: transparent;
  --card: rgba(31, 34, 38, .55);
  --border: rgba(255, 255, 255, .14);
  --track: rgba(255, 255, 255, .10);
  --bg: rgba(255, 255, 255, .06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page-solid: #17191c;
    --veil: rgba(15, 17, 20, .92);
    --sky-top: #17191c;
    --sky-1: transparent;
    --sky-2: transparent;
    --card: rgba(31, 34, 38, .55);
    --border: rgba(255, 255, 255, .14);
    --track: rgba(255, 255, 255, .10);
    --bg: rgba(255, 255, 255, .06);
  }
}

/* ---- Verre (perso.css) : jetons translucides utilisés par les cartes/panneaux ---- */
:root {
  --card: rgba(255, 255, 255, 0.94);
  --card-solid: #ffffff;
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-border-dark: rgba(0, 0, 0, 0.08);
}

:root[data-theme="dark"] {
  --card: rgba(24, 27, 31, 0.90);
  --card-solid: #181b1f;
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-border-dark: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dimmed"],
:root[data-theme="slate"] {
  --page-solid: #1e293b;
  --veil: rgba(30, 41, 59, 0.92);
  --sky-top: #1e293b;
  --sky-1: rgba(51, 65, 85, 0.4);
  --sky-2: rgba(30, 41, 59, 0.4);
  --card: #273549;
  --card-solid: #273549;
  --text: #f8fafc;
  --text-soft: #94a3b8;
  --border: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.25);
  --border-theme: rgba(255, 255, 255, 0.18);
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-border-dark: rgba(255, 255, 255, 0.10);
  --track: rgba(255, 255, 255, 0.12);
  --bg: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dimmed"]):not([data-theme="slate"]) {
    --card: rgba(24, 27, 31, 0.90);
    --card-solid: #181b1f;
    --glass-border: rgba(255, 255, 255, 0.14);
    --glass-border-dark: rgba(255, 255, 255, 0.08);
  }
}

/* ---- Accents (main.css) : six couleurs, chacune avec sa version Sombre et
 * son allégement pastel (data-accent-lightened="true") ---- */
:root[data-accent="blue"] {
  --accent: #2563eb;
  --accent-hi: #3b82f6;
  --accent-soft: #eff6ff;
  --accent-glow: rgba(37, 99, 235, .30);
}
:root[data-theme="dark"][data-accent="blue"] {
  --accent: #60a5fa;
  --accent-hi: #93c5fd;
  --accent-soft: rgba(37, 99, 235, .22);
  --accent-glow: rgba(96, 165, 250, .30);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-accent="blue"] {
    --accent: #60a5fa;
    --accent-hi: #93c5fd;
    --accent-soft: rgba(37, 99, 235, .22);
    --accent-glow: rgba(96, 165, 250, .30);
  }
}

:root[data-accent="amber"] {
  --accent: #d97706;
  --accent-hi: #f59e0b;
  --accent-soft: #fffbeb;
  --accent-glow: rgba(217, 119, 6, .30);
}
:root[data-theme="dark"][data-accent="amber"] {
  --accent: #fbbf24;
  --accent-hi: #fcd34d;
  --accent-soft: rgba(217, 119, 6, .22);
  --accent-glow: rgba(251, 191, 36, .30);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-accent="amber"] {
    --accent: #fbbf24;
    --accent-hi: #fcd34d;
    --accent-soft: rgba(217, 119, 6, .22);
    --accent-glow: rgba(251, 191, 36, .30);
  }
}

:root[data-accent="red"] {
  --accent: #dc2626;
  --accent-hi: #ef4444;
  --accent-soft: #fef2f2;
  --accent-glow: rgba(220, 38, 38, .30);
}
:root[data-theme="dark"][data-accent="red"] {
  --accent: #f87171;
  --accent-hi: #fca5a5;
  --accent-soft: rgba(220, 38, 38, .22);
  --accent-glow: rgba(248, 113, 113, .30);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-accent="red"] {
    --accent: #f87171;
    --accent-hi: #fca5a5;
    --accent-soft: rgba(220, 38, 38, .22);
    --accent-glow: rgba(248, 113, 113, .30);
  }
}

:root[data-accent="purple"] {
  --accent: #7c3aed;
  --accent-hi: #8b5cf6;
  --accent-soft: #f5f3ff;
  --accent-glow: rgba(124, 58, 237, .30);
}
:root[data-theme="dark"][data-accent="purple"] {
  --accent: #a78bfa;
  --accent-hi: #c4b5fd;
  --accent-soft: rgba(124, 58, 237, .22);
  --accent-glow: rgba(167, 139, 250, .30);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-accent="purple"] {
    --accent: #a78bfa;
    --accent-hi: #c4b5fd;
    --accent-soft: rgba(124, 58, 237, .22);
    --accent-glow: rgba(167, 139, 250, .30);
  }
}

:root[data-accent="emerald"] {
  --accent: #1f7a5c;
  --accent-hi: #2db387;
  --accent-soft: rgba(31, 122, 92, 0.12);
  --accent-glow: rgba(31, 122, 92, .30);
}
:root[data-theme="dark"][data-accent="emerald"] {
  --accent: #2db387;
  --accent-hi: #3cd4a2;
  --accent-soft: rgba(31, 122, 92, .22);
  --accent-glow: rgba(45, 179, 135, .30);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-accent="emerald"] {
    --accent: #2db387;
    --accent-hi: #3cd4a2;
    --accent-soft: rgba(31, 122, 92, .22);
    --accent-glow: rgba(45, 179, 135, .30);
  }
}

:root[data-accent="orange"] {
  --accent: #ea580c;
  --accent-hi: #f97316;
  --accent-soft: #fff7ed;
  --accent-glow: rgba(234, 88, 12, .30);
}
:root[data-theme="dark"][data-accent="orange"] {
  --accent: #fb923c;
  --accent-hi: #fdba74;
  --accent-soft: rgba(234, 88, 12, .22);
  --accent-glow: rgba(251, 146, 60, .30);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-accent="orange"] {
    --accent: #fb923c;
    --accent-hi: #fdba74;
    --accent-soft: rgba(234, 88, 12, .22);
    --accent-glow: rgba(251, 146, 60, .30);
  }
}

/* ---- Allègement pastel de l'accent (data-accent-lightened="true") ---- */
:root[data-accent-lightened="true"][data-accent="emerald"] { --accent: #3ba381; --accent-hi: #5fc4a2; }
:root[data-accent-lightened="true"][data-accent="blue"] { --accent: #60a5fa; --accent-hi: #93c5fd; }
:root[data-accent-lightened="true"][data-accent="amber"] { --accent: #f59e0b; --accent-hi: #fbbf24; }
:root[data-accent-lightened="true"][data-accent="orange"] { --accent: #f97316; --accent-hi: #fb923c; }
:root[data-accent-lightened="true"][data-accent="red"] { --accent: #f87171; --accent-hi: #fca5a5; }
:root[data-accent-lightened="true"][data-accent="purple"] { --accent: #a78bfa; --accent-hi: #c4b5fd; }

:root[data-theme="dark"][data-accent-lightened="true"][data-accent="emerald"] { --accent: #64d8a9; --accent-hi: #8be7c2; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-accent-lightened="true"][data-accent="emerald"] { --accent: #64d8a9; --accent-hi: #8be7c2; }
}
:root[data-theme="dark"][data-accent-lightened="true"][data-accent="blue"] { --accent: #93c5fd; --accent-hi: #bfdbfe; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-accent-lightened="true"][data-accent="blue"] { --accent: #93c5fd; --accent-hi: #bfdbfe; }
}
:root[data-theme="dark"][data-accent-lightened="true"][data-accent="amber"] { --accent: #fcd34d; --accent-hi: #fde68a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-accent-lightened="true"][data-accent="amber"] { --accent: #fcd34d; --accent-hi: #fde68a; }
}
:root[data-theme="dark"][data-accent-lightened="true"][data-accent="orange"] { --accent: #fdba74; --accent-hi: #fed7aa; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-accent-lightened="true"][data-accent="orange"] { --accent: #fdba74; --accent-hi: #fed7aa; }
}
:root[data-theme="dark"][data-accent-lightened="true"][data-accent="red"] { --accent: #fca5a5; --accent-hi: #fecaca; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-accent-lightened="true"][data-accent="red"] { --accent: #fca5a5; --accent-hi: #fecaca; }
}
:root[data-theme="dark"][data-accent-lightened="true"][data-accent="purple"] { --accent: #c4b5fd; --accent-hi: #ddd6fe; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-accent-lightened="true"][data-accent="purple"] { --accent: #c4b5fd; --accent-hi: #ddd6fe; }
}