/*
 * themes.css — Chronique des Mondes
 * Refonte « codex premium » : accents par type de jeu, à-plats et filets ciselés.
 * Chaque classe .theme-{name} surcharge les tokens --theme-*.
 * Appliqué sur n'importe quel wrapper via <AppThemeWrapper GameType="..." />.
 * --theme-on-primary = couleur de texte lisible sur un bouton plein de la couleur d'accent.
 * Les halos (--theme-glow) sont volontairement discrets (fini le néon).
 */

/* ============================================
   THÈME PAR DÉFAUT = GÉNÉRIQUE (ambre chaleureux)
   Accueillant pour un nouvel utilisateur sans jeu choisi.
   ============================================ */
:root {
  --theme-primary:      #d69f52;
  --theme-secondary:    #9a5a2b;
  --theme-accent:       #c67b3a;
  --theme-on-primary:   #17110a;
  /* Accent réservé au TEXTE / ICÔNES / bordures fines (≠ fond de bouton).
     Par défaut = --theme-primary ; assombri par thème en mode clair. */
  --theme-ink:          var(--theme-primary);
  --theme-heading-font: var(--font-heading);
  --theme-card-border:  rgba(214, 159, 82, 0.28);
  --theme-badge-bg:     rgba(214, 159, 82, 0.14);
  --theme-badge-text:   #e0b878;
  --theme-gradient:     linear-gradient(135deg, #d69f52 0%, #9a5a2b 100%);
  --theme-glow:         0 0 16px rgba(214, 159, 82, 0.14);
}

/* ============================================
   THEME: EMPTY — Lobby d'invitation, neutre
   ============================================ */
.theme-empty {
  --theme-primary:      #8a8f9c;
  --theme-secondary:    #6b7080;
  --theme-accent:       #aeb4c0;
  --theme-on-primary:   #14161b;
  --theme-heading-font: var(--font-body);
  --theme-card-border:  rgba(138, 143, 156, 0.24);
  --theme-badge-bg:     rgba(138, 143, 156, 0.12);
  --theme-badge-text:   #aeb4c0;
  --theme-gradient:     linear-gradient(135deg, #8a8f9c 0%, #6b7080 100%);
  --theme-glow:         none;
}

/* ============================================
   THEME: GENERIC — Ambre (identique au défaut)
   ============================================ */
.theme-generic {
  --theme-primary:      #d69f52;
  --theme-secondary:    #9a5a2b;
  --theme-accent:       #c67b3a;
  --theme-on-primary:   #17110a;
  --theme-heading-font: var(--font-heading);
  --theme-card-border:  rgba(214, 159, 82, 0.28);
  --theme-badge-bg:     rgba(214, 159, 82, 0.14);
  --theme-badge-text:   #e0b878;
  --theme-gradient:     linear-gradient(135deg, #d69f52 0%, #9a5a2b 100%);
  --theme-glow:         0 0 16px rgba(214, 159, 82, 0.14);
}

/* ============================================
   THEME: D&D 5e — Rouge héraldique + or
   ============================================ */
.theme-dnd5e {
  --theme-primary:      #a72b27;
  --theme-secondary:    #c99a3e;
  --theme-accent:       #d4a23c;
  --theme-on-primary:   #f7ece1;
  --theme-heading-font: 'Cinzel', Georgia, serif;
  --theme-card-border:  rgba(167, 43, 39, 0.3);
  --theme-badge-bg:     rgba(167, 43, 39, 0.15);
  --theme-badge-text:   #dda552;
  --theme-gradient:     linear-gradient(135deg, #a72b27 0%, #c99a3e 100%);
  --theme-glow:         0 0 16px rgba(167, 43, 39, 0.18);
}

/* ============================================
   THEME: PATHFINDER — Bronze & forêt
   ============================================ */
.theme-pathfinder {
  --theme-primary:      #cd7f32;
  --theme-secondary:    #2d5a27;
  --theme-accent:       #b98a3a;
  --theme-on-primary:   #17110a;
  --theme-heading-font: 'Cinzel', Georgia, serif;
  --theme-card-border:  rgba(205, 127, 50, 0.3);
  --theme-badge-bg:     rgba(205, 127, 50, 0.15);
  --theme-badge-text:   #d69a55;
  --theme-gradient:     linear-gradient(135deg, #cd7f32 0%, #2d5a27 100%);
  --theme-glow:         0 0 16px rgba(205, 127, 50, 0.14);
}

/* ============================================
   THEME: CALL OF CTHULHU — Vert d'outre-tombe
   ============================================ */
.theme-callofcthulhu {
  --theme-primary:      #5f9e77;
  --theme-secondary:    #243447;
  --theme-accent:       #7fbf95;
  --theme-on-primary:   #07130d;
  --theme-heading-font: 'Cinzel', Georgia, serif;
  --theme-card-border:  rgba(95, 158, 119, 0.32);
  --theme-badge-bg:     rgba(95, 158, 119, 0.16);
  --theme-badge-text:   #82c199;
  --theme-gradient:     linear-gradient(135deg, #5f9e77 0%, #243447 100%);
  --theme-glow:         0 0 18px rgba(95, 158, 119, 0.18);
}

/* ============================================
   THEME: WARHAMMER — Rouge brûlé & or grimdark
   ============================================ */
.theme-warhammer {
  --theme-primary:      #caa53e;
  --theme-secondary:    #8a1e15;
  --theme-accent:       #e6c454;
  --theme-on-primary:   #140a06;
  --theme-heading-font: 'Cinzel Decorative', 'Cinzel', serif;
  --theme-card-border:  rgba(202, 165, 62, 0.40);
  --theme-badge-bg:     rgba(202, 165, 62, 0.16);
  --theme-badge-text:   #e6c454;
  --theme-gradient:     linear-gradient(135deg, #8a1e15 0%, #caa53e 100%);
  --theme-glow:         0 0 16px rgba(202, 165, 62, 0.18);
}

/* ============================================
   THEME: CYBERPUNK — Néon maîtrisé (cyan / magenta)
   ============================================ */
.theme-cyberpunk {
  --theme-primary:      #2bc4c9;
  --theme-secondary:    #e357c8;
  --theme-accent:       #f2e14a;
  --theme-on-primary:   #052024;
  --theme-heading-font: 'Orbitron', 'Inter', sans-serif;
  --theme-card-border:  rgba(43, 196, 201, 0.3);
  --theme-badge-bg:     rgba(43, 196, 201, 0.13);
  --theme-badge-text:   #4fd6da;
  --theme-gradient:     linear-gradient(135deg, #2bc4c9 0%, #e357c8 100%);
  --theme-glow:         0 0 22px rgba(43, 196, 201, 0.24);
}

/* ============================================
   THEME: SKYRIM — Acier nordique
   ============================================ */
.theme-skyrim {
  --theme-primary:      #6aa0bd;
  --theme-secondary:    #7d8a93;
  --theme-accent:       #a9c4d3;
  --theme-on-primary:   #08131a;
  --theme-heading-font: 'Cinzel', Georgia, serif;
  --theme-card-border:  rgba(106, 160, 189, 0.3);
  --theme-badge-bg:     rgba(106, 160, 189, 0.15);
  --theme-badge-text:   #8fbcd2;
  --theme-gradient:     linear-gradient(135deg, #6aa0bd 0%, #7d8a93 100%);
  --theme-glow:         0 0 16px rgba(106, 160, 189, 0.16);
}

/* ============================================
   THEME: CUSTOM — Prune feutrée
   ============================================ */
.theme-custom {
  --theme-primary:      #9c5f8f;
  --theme-secondary:    #5b4570;
  --theme-accent:       #c08bb5;
  --theme-on-primary:   #f6edf3;
  --theme-heading-font: var(--font-heading);
  --theme-card-border:  rgba(156, 95, 143, 0.3);
  --theme-badge-bg:     rgba(156, 95, 143, 0.15);
  --theme-badge-text:   #c491ba;
  --theme-gradient:     linear-gradient(135deg, #9c5f8f 0%, #5b4570 100%);
  --theme-glow:         0 0 16px rgba(156, 95, 143, 0.18);
}

/* ============================================
   MODE CLAIR — accent générique assombri
   Sur le fond « parchemin » clair, l'ambre vif #d69f52 tombe à ~2.2:1
   (icônes/bordures) : on le fonce pour le thème générique par défaut, où
   le texte du bouton (--theme-on-primary sombre) reste lisible sur l'ambre
   moyen. Les thèmes de jeu ne sont pas touchés ici : plusieurs associent un
   --theme-on-primary sombre à leur accent en fond de bouton, et les foncer
   casserait le contraste du bouton (à retravailler avec un token dédié).
   ============================================ */
[data-theme="light"] {
  --theme-primary: #a86f28;
  --theme-secondary: #85481f;
  --theme-accent: #9a5a2b;
  --theme-glow: 0 0 14px rgba(168, 111, 40, 0.10);
}
[data-theme="light"].theme-generic,
[data-theme="light"] .theme-generic {
  --theme-primary: #a86f28;
  --theme-secondary: #85481f;
  --theme-accent: #9a5a2b;
}

/* Thèmes de jeu : accent TEXTE/ICÔNE (--theme-ink) assombri en mode clair,
   sans toucher --theme-primary (= fond de bouton, laissé vif). Seuls les
   accents qui échouent le 3:1 sur fond clair sont foncés. */
[data-theme="light"].theme-pathfinder,
[data-theme="light"] .theme-pathfinder { --theme-ink: #8a5220; }
[data-theme="light"].theme-callofcthulhu,
[data-theme="light"] .theme-callofcthulhu { --theme-ink: #3f7355; }
[data-theme="light"].theme-cyberpunk,
[data-theme="light"] .theme-cyberpunk { --theme-ink: #147d81; }
[data-theme="light"].theme-skyrim,
[data-theme="light"] .theme-skyrim { --theme-ink: #3f6a82; }
[data-theme="light"].theme-custom,
[data-theme="light"] .theme-custom { --theme-ink: #834f78; }
[data-theme="light"].theme-empty,
[data-theme="light"] .theme-empty { --theme-ink: #5f6472; }
[data-theme="light"].theme-warhammer,
[data-theme="light"] .theme-warhammer { --theme-ink: #8a1e15; }
[data-theme="light"].theme-dnd5e,
[data-theme="light"] .theme-dnd5e { --theme-ink: #c0342f; }

/* ============================================
   TOKENS IMMERSIFS (maquette validée)
   --theme-tint         = teinte de fond très légère du hero/frame
   --theme-display-font = police des grands titres (hero) par thème
   ============================================ */
:root                { --theme-tint: rgba(214, 159, 82, 0.07); --theme-display-font: var(--font-body); }
.theme-generic       { --theme-tint: rgba(214, 159, 82, 0.07); --theme-display-font: var(--font-body); }
.theme-empty         { --theme-tint: rgba(138, 143, 156, 0.06); --theme-display-font: var(--font-body); }
.theme-dnd5e         { --theme-tint: rgba(167, 43, 39, 0.10);  --theme-display-font: 'Cinzel', Georgia, serif; }
.theme-pathfinder    { --theme-tint: rgba(205, 127, 50, 0.09); --theme-display-font: 'Cinzel', Georgia, serif; }
.theme-callofcthulhu { --theme-tint: rgba(95, 158, 119, 0.10); --theme-display-font: 'IM Fell English', Georgia, serif; }
.theme-warhammer     { --theme-tint: rgba(202, 165, 62, 0.09); --theme-display-font: 'Cinzel Decorative', 'Cinzel', serif; }
.theme-cyberpunk     { --theme-tint: rgba(43, 196, 201, 0.09); --theme-display-font: 'Orbitron', var(--font-body); }
.theme-skyrim        { --theme-tint: rgba(106, 160, 189, 0.08);--theme-display-font: 'Metamorphous', Georgia, serif; }
.theme-custom        { --theme-tint: rgba(156, 95, 143, 0.09); --theme-display-font: 'Cinzel', Georgia, serif; }

/* ============================================
   PANNEAU ENCADRÉ « CODEX » (.cdm-hero) — signature par univers.
   Reproduction fidèle de la maquette validée. À placer dans un AppThemeWrapper.
   ============================================ */
.cdm-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--theme-card-border, var(--color-border));
  border-radius: 6px;
  background: linear-gradient(135deg, var(--theme-tint, transparent), var(--color-bg-card) 72%);
}

/* Générique — sobre (rien de plus). */

/* D&D — double filet ciselé. */
.theme-dnd5e .cdm-hero {
  border-radius: 5px;
  box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.28), inset 0 0 0 5px var(--theme-card-border);
  background: linear-gradient(135deg, rgba(167, 43, 39, 0.12), var(--color-bg-card) 70%);
}
[data-theme="light"] .theme-dnd5e .cdm-hero {
  box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.05), inset 0 0 0 5px var(--theme-card-border);
}

/* Skyrim — coins biseautés (pierre taillée). */
.theme-skyrim .cdm-hero {
  border: 0;
  border-radius: 0;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  box-shadow: inset 0 0 0 1px var(--theme-card-border);
  background: linear-gradient(135deg, rgba(106, 160, 189, 0.12), var(--color-bg-card) 70%);
}

/* Cyberpunk — barre d'accent à gauche. */
.theme-cyberpunk .cdm-hero {
  border-left: 3px solid var(--theme-primary);
}

/* L'Appel de Cthulhu — ombre interne oppressante. */
.theme-callofcthulhu .cdm-hero {
  box-shadow: inset 0 0 55px rgba(0, 0, 0, 0.55);
  background: radial-gradient(120% 100% at 80% -10%, rgba(95, 158, 119, 0.12), var(--color-bg-card) 65%);
}
[data-theme="light"] .theme-callofcthulhu .cdm-hero {
  box-shadow: inset 0 0 55px rgba(36, 52, 71, 0.10);
}

/* Warhammer — liseré doré/noir en damier + fond sombre. */
.theme-warhammer .cdm-hero {
  border-radius: 4px;
  background:
    repeating-linear-gradient(45deg, #caa53e 0 11px, #140a06 11px 22px) top / 100% 12px no-repeat,
    linear-gradient(180deg, rgba(138, 30, 21, 0.14), var(--color-bg-card) 80%);
}

/* Textures de fond subtiles par univers (motifs de la maquette). */
.cdm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.theme-generic .cdm-hero::before {
  background: radial-gradient(circle, rgba(214, 159, 82, 0.09) 1px, transparent 1.6px);
  background-size: 22px 22px;
  opacity: 0.6;
}
.theme-dnd5e .cdm-hero::before {
  background: radial-gradient(circle at 50% 50%, rgba(201, 154, 62, 0.11) 0 2px, transparent 2px), radial-gradient(circle at 50% 50%, transparent 13px, rgba(167, 43, 39, 0.05) 13px 14px, transparent 14px);
  background-size: 46px 46px, 46px 46px;
  opacity: 0.55;
}
.theme-skyrim .cdm-hero::before {
  background: radial-gradient(rgba(106, 160, 189, 0.05) 0.5px, transparent 1px);
  background-size: 4px 4px;
  opacity: 0.7;
}
.theme-cyberpunk .cdm-hero::before {
  background: repeating-linear-gradient(0deg, rgba(43, 196, 201, 0.06) 0 1px, transparent 1px 3px);
  opacity: 0.6;
}
.theme-callofcthulhu .cdm-hero::before {
  background: linear-gradient(rgba(95, 158, 119, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(95, 158, 119, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.7;
}
.theme-warhammer .cdm-hero::before {
  background: repeating-linear-gradient(45deg, rgba(202, 165, 62, 0.05) 0 1px, transparent 1px 10px);
  opacity: 0.5;
}

/* ============================================
   APPLICATIF — Zones themed
   ============================================ */
.theme-border {
  border-color: var(--theme-card-border) !important;
}

.theme-heading {
  font-family: var(--theme-heading-font);
  background: var(--theme-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.theme-badge {
  background: var(--theme-badge-bg);
  color: var(--theme-badge-text);
  border: 1px solid var(--theme-card-border);
}

.theme-card-glow {
  box-shadow: var(--theme-glow);
}