/*
 * tokens.css — Jetons de couleur de Hodari (SOURCE UNIQUE)
 * ============================================================================
 * Toutes les couleurs des pages Hodari viennent d'ici. Les autres feuilles (hodari.css, visiteur.css,
 * audiotheque.css, fiche-viewer.css) n'écrivent AUCUNE couleur en dur : elles utilisent var(--…).
 * Exceptions volontaires : l'impression (gris), les masques (#000), les @property ci-dessous (valeurs
 * initiales obligatoires), <meta name="theme-color"> et 404.html. Un test (dev/tests/couleurs.test.js) le
 * vérifie, et que chaque jeton ci-dessous figure dans la charte graphique (partie Hodari).
 *
 * Thème : clair par défaut ; sombre quand <body> porte la classe yk-dark. Les jetons qui changent en sombre
 * sont redéfinis plus bas (:root:has(body.yk-dark)). Les jetons « --yk-dk-… » ne servent QUE dans les règles
 * sombres (niveau 1 de la réduction des nuances ; au niveau 2 ils deviendront des jetons à deux valeurs).
 * Ordre de chargement : après shared.css et style.css (qui définissent les mêmes noms en bleu marine).
 * Format des lignes : « --nom: valeur; » suivi d’un commentaire donnant le rôle — repris dans la charte.
 */

/* @property : permet d'animer les trois couleurs du dégradé (fondu au changement de thème : la classe
   yk-fading est posée sur <html> par hodari.js pendant 0,4 s, voir hodari.css). Valeurs initiales = thème clair. */
@property --g1 { syntax: '<color>'; inherits: true; initial-value: #d9a643; }
@property --g2 { syntax: '<color>'; inherits: true; initial-value: #f1ca6d; }
@property --g3 { syntax: '<color>'; inherits: true; initial-value: #fff3c9; }

:root {

  /* ── Palette de base de Hodari (surcharge les jetons de shared.css pour les pages Hodari) ── */
  --navy: #8f1c1d;   /* Couleur de structure : barre du haut, pied de page, boutons principaux (rouge en clair, brun en sombre) */
  --navy-light: #a8302a;   /* Variante plus claire de --navy (survols) */
  --navy-pale: #f4eae9;   /* Fond très pâle teinté de rouge */
  --lavender: #f3e9e8;   /* Fond de surface rosé */
  --lavender2: #e9d5d4;   /* Surface/bordure rosée, un cran plus soutenue */
  --lavender3: #dabab9;   /* Bordure de champ sélectionné, rosé soutenu */
  --surface: #f7eeed;   /* Surface des cartes et zones secondaires */
  --border: #eedddc;   /* Filets et bordures */
  --text: #2c1d1c;   /* Texte principal */
  --text-2: #6c4f4e;   /* Texte secondaire */
  --text-3: #9d8483;   /* Texte discret */
  --accent: #8f1c1d;   /* Accent : rouge en clair, jaune en sombre */
  --accent-pale: #faeeed;   /* Fond d’accent très pâle */
  --shadow: 0 2px 12px rgba(73,21,20,0.12);   /* Ombre courante (teintée de brun) */
  --shadow-lg: 0 8px 32px rgba(73,21,20,0.20);   /* Grande ombre (fenêtres) */
  --g1: #d9a643;   /* Dégradé du thème, couleur 1 (jaune en clair, rouge sombre en sombre) */
  --g2: #f1ca6d;   /* Dégradé du thème, couleur 2 */
  --g3: #fff3c9;   /* Dégradé du thème, couleur 3 */
  --c-auteur: #8f1c1d;   /* Filtres avancés (groupe unique) : texte et titre */
  --c-auteur-bg: rgba(143,28,29,0.07);   /* Filtres avancés : fond */
  --c-auteur-border: rgba(143,28,29,0.30);   /* Filtres avancés : bordure */

  /* ── Marque et accents fixes (identiques en thème clair et sombre) ── */
  --yk-brand: #8f1c1d;   /* Rouge de marque FIXE (ne bascule pas en thème sombre, contrairement à --navy) */
  --yk-brand-dk: #6f1415;   /* Rouge foncé : survol du bouton d’achat (thème clair) */
  --yk-brown: #491514;   /* Brun du logo : barre du haut et pied de page du thème sombre, encre des fenêtres claires */
  --yk-brown-2: #5f2220;   /* Brun plus clair (teintes de repli, dégradés) */
  --yk-gold: #c0a157;   /* Or : icône de l’application, bord des pastilles */
  --yk-yellow: #f1ca6d;   /* Jaune du thème sombre (texte d’accent, survols) */
  --yk-ember: #d9502f;   /* Orange-rouge : fin du dégradé sombre, teintes de repli */

  /* ── Thème sombre (body.yk-dark) : surfaces et textes ── */
  --yk-dk-bg: #281514;   /* Sombre : fond de page */
  --yk-dk-card: #3c2120;   /* Sombre : cartes, fenêtres, volets */
  --yk-dk-card2: #5b312f;   /* Sombre : texte encadré, survols, bordures marquées */
  --yk-dk-line: #794544;   /* Sombre : traits, barres de défilement, bordures */
  --yk-dk-line-hi: #895351;   /* Sombre : bordure au survol */
  --yk-dk-text: #f0e1e1;   /* Sombre : texte */
  --yk-dk-title: #f9cbc9;   /* Sombre : titres */
  --yk-dk-muted: #c09f9e;   /* Sombre : texte discret */

  /* ── Pastilles ── */
  --yk-chip: #fbf3dc;   /* Pastille « Danse » : fond clair */
  --yk-chip-hover: #f3e3b3;   /* Pastille : survol (clair) */
  --yk-chip-dk: #4a3523;   /* Pastille : fond sombre */
  --yk-chip-hover-dk: #5d4529;   /* Pastille : survol (sombre) */

  /* ── Catégories et recueils (déclinaisons propres à Hodari) ── */
  --yk-ultreia-dk-text: #8fc4ff;   /* Sombre : texte du badge Ultreïa */
  --yk-dispo-dk-text: #7be0a0;   /* Sombre : texte du badge Hodari */
  --yk-ferao: #b8860b;   /* Filtre « Ferao » actif */
  --yk-louv: #ffe32e;   /* Pastille louveteaux : « seulement » */
  --yk-louv-ink: #3b3200;   /* Pastille louveteaux : encre sur jaune */
  --yk-louv-none: #c0392b;   /* Pastille louveteaux : « aucun » */

  /* ── Marque et accents fixes (identiques en thème clair et sombre) ── */
  --yk-black: #000000;   /* Noir pur : fond du lecteur vidéo, texte sur fond jaune */

  /* ── Thème sombre (body.yk-dark) : surfaces et textes ── */
  --yk-pdf-dk: #1b1110;   /* Sombre : fond du lecteur PDF */

  /* ── Catégories et recueils (déclinaisons propres à Hodari) ── */
  --yk-cover-dflt: #b09560;   /* Pochette par défaut (fond) */

  /* ── Pochettes générées (dégradés de repli quand il n’y a pas de pochette) ── */
  --yk-gen0-a: #b0603a;   /* Pochette générée 0 : début */
  --yk-gen0-b: #702f2c;   /* Pochette générée 0 : fin */
  --yk-gen1-b: #5c1d41;   /* Pochette générée 1 : fin (début = --c-audio) */
  --yk-gen2-b: #004a45;   /* Pochette générée 2 : fin (début = --c-langue) */
  --yk-gen3-a: #b88a2c;   /* Pochette générée 3 : début */
  --yk-gen3-b: #6b4a0e;   /* Pochette générée 3 : fin */
  --yk-gen4-a: #ad5956;   /* Pochette générée 4 : début (fin = --yk-brown-2) */

  /* ── Plateformes (couleurs de marque des tiers — exception documentée) ── */
  --yk-plat-sp: #1DB954;   /* Plateforme : Spotify (couleur de marque du tiers) */
  --yk-plat-dz: #A238FF;   /* Plateforme : Deezer */
  --yk-plat-am: #FA243C;   /* Plateforme : Apple Music */
  --yk-plat-ym: #FF0000;   /* Plateforme : YouTube Music */
  --yk-plat-sc: #FF5500;   /* Plateforme : SoundCloud */
  --yk-plat-yt: #FF0000;   /* Plateforme : YouTube */

  /* ── Transparences (échelles : on ne crée pas de nouveau niveau sans raison) ── */
  --yk-w08: rgba(255,255,255,0.08);   /* Blanc à 8 % (voiles et traits sur fond rouge ou brun) */
  --yk-w15: rgba(255,255,255,0.15);   /* Blanc à 15 % (voiles et traits sur fond rouge ou brun) */
  --yk-w22: rgba(255,255,255,0.22);   /* Blanc à 22 % (voiles et traits sur fond rouge ou brun) */
  --yk-w30: rgba(255,255,255,0.3);   /* Blanc à 30 % (voiles et traits sur fond rouge ou brun) */
  --yk-w40: rgba(255,255,255,0.4);   /* Blanc à 40 % (voiles et traits sur fond rouge ou brun) */
  --yk-w55: rgba(255,255,255,0.55);   /* Blanc à 55 % (voiles et traits sur fond rouge ou brun) */
  --yk-w75: rgba(255,255,255,0.75);   /* Blanc à 75 % (voiles et traits sur fond rouge ou brun) */
  --yk-w90: rgba(255,255,255,0.9);   /* Blanc à 90 % (voiles et traits sur fond rouge ou brun) */
  --yk-b08: rgba(73,21,20,0.08);   /* Brun du logo à 8 % */
  --yk-b20: rgba(73,21,20,0.2);   /* Brun du logo à 20 % */
  --yk-b35: rgba(73,21,20,0.35);   /* Brun du logo à 35 % */
  --yk-b50: rgba(73,21,20,0.5);   /* Brun du logo à 50 % */
  --yk-b65: rgba(73,21,20,0.65);   /* Brun du logo à 65 % */
  --yk-b80: rgba(73,21,20,0.8);   /* Brun du logo à 80 % */
  --yk-k20: rgba(0,0,0,0.2);   /* Noir à 20 % (ombres) */
  --yk-k30: rgba(0,0,0,0.3);   /* Noir à 30 % (ombres) */
  --yk-k40: rgba(0,0,0,0.4);   /* Noir à 40 % (ombres) */
  --yk-k55: rgba(0,0,0,0.55);   /* Noir à 55 % (ombres) */
  --yk-veil20: rgba(35,15,15,0.2);   /* Voile brun très foncé à 20 % (arrière-plan des fenêtres) */
  --yk-veil50: rgba(35,15,15,0.5);   /* Voile brun très foncé à 50 % (arrière-plan des fenêtres) */
  --yk-veil60: rgba(35,15,15,0.6);   /* Voile brun très foncé à 60 % (arrière-plan des fenêtres) */
  --yk-title-20: rgba(248,191,189,0.2);   /* Titre sombre à 20 % */
  --yk-brand-16: rgba(143,28,29,0.16);   /* Rouge de marque à 16 % */
  --yk-dk-card-0: rgba(60,33,32,0);   /* Carte sombre transparente (fondu de dégradé) */
  --yk-ring: rgba(184,181,222,0.35);   /* Halo de sélection des champs de recherche */
  --yk-blue-30: rgba(26,95,160,0.3);   /* Bleu Ultreïa à 30 % */
  --yk-green-35: rgba(26,107,58,0.35);   /* Vert à 35 % */
  --yk-green-55: rgba(26,107,58,0.55);   /* Vert à 55 % */
  --yk-themes-40: rgba(122,82,0,0.4);   /* Or foncé à 40 % */
  --yk-themes-60: rgba(122,82,0,0.6);   /* Or foncé à 60 % */
  --yk-text3-15: rgba(157,131,130,0.15);   /* Texte discret à 15 % */
  --yk-ultreia-dk-line-55: rgba(110,170,230,0.55);   /* Bordure Ultreïa sombre à 55 % */
  /* ── Rôles : une couleur par rôle, valeur claire ici, valeur sombre dans le bloc du thème sombre, plus bas (niveau 2) ── */
  --yk-surface: var(--white);   /* Fond des cartes, fenêtres et volets (blanc en clair, brun carte en sombre) */
  --yk-muted: var(--text-3);   /* Texte discret (gris-brun en clair, rose atténué en sombre) */
  --yk-hl: var(--yk-brand);   /* Accent au survol et à l’état actif : texte et bordures (rouge en clair, jaune en sombre) */
  --yk-text-2: var(--text-2);   /* Texte secondaire (même teinte de texte en sombre pour tous les éléments) */
  --yk-ink: var(--text);   /* Texte principal */
  --yk-surface-2: var(--surface);   /* Fond de surface secondaire (boutons discrets, zones de texte) */
  --yk-surface-soft: var(--surface-soft);   /* Fond de surface très légère (zones de texte, lire la suite) */
  --yk-fill: var(--lavender2);   /* Remplissage discret : survol de la croix de fermeture, pastille « aucun » */
  --yk-ink-brown: var(--yk-brown);   /* Texte brun des fenêtres (clair : brun du logo) */
  --yk-hl-strong: var(--yk-brand-dk);   /* Fond d’accent fort au survol (bouton d’achat : rouge foncé en clair, jaune en sombre) */
  --yk-title: var(--navy);   /* Titres des cartes et fiches */
  --yk-ink-navy: var(--navy);   /* Texte marine/rouge des boutons de l’audiothèque */
  --yk-btn: var(--navy);   /* Fond des boutons de lecture et de retour (rouge en clair, trait brun en sombre) */
}

/* Thème sombre : seuls les jetons qui changent sont redéfinis */
:root:has(body.yk-dark) {
  --navy: #491514;
  --navy-light: #5f2220;
  --accent: #f1ca6d;
  --g1: #4a1010;
  --g2: #8f1c1d;
  --g3: #d9502f;
  /* Rôles : valeurs du thème sombre (niveau 2) */
  --yk-surface: var(--yk-dk-card);
  --yk-muted: var(--yk-dk-muted);
  --yk-hl: var(--yk-yellow);
  --yk-text-2: var(--yk-dk-text);
  --yk-ink: var(--yk-dk-text);
  --yk-surface-2: var(--yk-dk-card2);
  --yk-surface-soft: var(--yk-dk-card2);
  --yk-fill: var(--yk-dk-line);
  --yk-ink-brown: var(--yk-dk-text);
  --yk-hl-strong: var(--yk-yellow);
  --yk-title: var(--yk-dk-title);
  --yk-ink-navy: var(--yk-dk-text);
  --yk-btn: var(--yk-dk-line);
  --yk-chip-hover: var(--yk-chip-hover-dk);
}
body.yk-dark {   /* groupe « Auteur » : redéfini sur body (comme avant le déplacement) */
  --c-auteur: #f1ca6d;
  --c-auteur-bg: rgba(241,202,109,0.12);
  --c-auteur-border: rgba(241,202,109,0.38);
}