/* ============================================================
   themes.css — 15 skins × variantes couleur, polices, contrastes
   Ordre CSS important :
     1. Skins (§1) — spécificité :root[data-skin="X"] = (0,2,0)
     2. Variantes (§2) — spécificité :root[data-skin][data-theme-variant="Y"] = (0,3,0)
        → les variantes GAGNENT car plus spécifiques.
   ============================================================ */

/* §1 — SKINS : structure + palette + polices (paire bg/text contrastée) */

:root[data-skin="aurora"] {
    --font-head:'Sora',sans-serif; --font-body:'Inter',sans-serif;
    --radius:18px; --btn-radius:12px; --bubble-radius:16px;
    --primary:#8B5CF6; --primary-light:#A78BFA; --accent:#EC4899; --secondary:#06B6D4;
    --bg:#ffffff; --bg-secondary:#f2f0fb; --card-bg:#ffffff;
    --text:#1b1430; --text-light:#6e6a82; --border:rgba(0,0,0,.08);
    --user-bubble:#8B5CF6; --user-text:#fff; --bot-bubble:#f4f1fe; --bot-text:#1b1430;
    --shadow:0 12px 28px rgba(139,92,246,.15);
}
:root[data-skin="pastel"] {
    --font-head:'Fredoka',sans-serif; --font-body:'Nunito',sans-serif;
    --radius:24px; --btn-radius:99px; --bubble-radius:22px;
    --primary:#FF8FB1; --primary-light:#FFB3C8; --accent:#FFC93C; --secondary:#8FD3FF;
    --bg:#FFF6FB; --bg-secondary:#ffe9f3; --card-bg:#fff;
    --text:#4A4458; --text-light:#9b93a8; --border:#ffd9e6;
    --user-bubble:#FF8FB1; --user-text:#fff; --bot-bubble:#FFF0D9; --bot-text:#4A4458;
    --shadow:0 8px 20px rgba(255,143,177,.18);
}
:root[data-skin="clay"] {
    --font-head:'Quicksand',sans-serif; --font-body:'Nunito',sans-serif;
    --radius:28px; --btn-radius:18px; --bubble-radius:22px;
    --primary:#6C7CFF; --primary-light:#8B98FF; --accent:#FF9CA8; --secondary:#5CE1C0;
    --bg:#EDF0FF; --bg-secondary:#e6eaff; --card-bg:#fff;
    --text:#3a3a5a; --text-light:#8a8aad; --border:rgba(0,0,0,.06);
    --user-bubble:#6C7CFF; --user-text:#fff; --bot-bubble:#fff; --bot-text:#3a3a5a;
    --shadow:6px 6px 14px rgba(70,80,160,.16), -6px -6px 14px rgba(255,255,255,.95);
}
:root[data-skin="gamified"] {
    --font-head:'Nunito',sans-serif; --font-body:'Nunito',sans-serif;
    --radius:16px; --btn-radius:16px; --bubble-radius:16px;
    --primary:#58CC02; --primary-light:#6BDC1A; --accent:#FF9600; --secondary:#1CB0F6;
    --bg:#fff; --bg-secondary:#eef7e3; --card-bg:#fff;
    --text:#3C3C3C; --text-light:#8a8a8a; --border:#e5e5e5;
    --user-bubble:#58CC02; --user-text:#fff; --bot-bubble:#f1f7e8; --bot-text:#3C3C3C;
    --shadow:0 4px 0 rgba(0,0,0,.08);
}
:root[data-skin="terra"] {
    --font-head:'Fraunces',serif; --font-body:'Nunito Sans',sans-serif;
    --radius:14px; --btn-radius:10px; --bubble-radius:14px;
    --primary:#C2410C; --primary-light:#EA580C; --accent:#D4A574; --secondary:#6B8E5A;
    --bg:#FDF6EC; --bg-secondary:#F5EBD9; --card-bg:#FFFDF8;
    --text:#3D2B1F; --text-light:#8B7355; --border:#E8DDD0;
    --user-bubble:#C2410C; --user-text:#fff; --bot-bubble:#FDF6EC; --bot-text:#3D2B1F;
    --shadow:0 6px 18px rgba(194,65,12,.12);
}
:root[data-skin="ocean"] {
    --font-head:'Sora',sans-serif; --font-body:'Inter',sans-serif;
    --radius:20px; --btn-radius:14px; --bubble-radius:18px;
    --primary:#0EA5E9; --primary-light:#38BDF8; --accent:#06B6D4; --secondary:#818CF8;
    --bg:#F0F9FF; --bg-secondary:#E0F2FE; --card-bg:#fff;
    --text:#0C4A6E; --text-light:#0369A1; --border:rgba(14,165,233,.12);
    --user-bubble:#0EA5E9; --user-text:#fff; --bot-bubble:#E0F2FE; --bot-text:#0C4A6E;
    --shadow:0 10px 30px rgba(14,165,233,.18);
}
:root[data-skin="sunrise"] {
    --font-head:'Sora',sans-serif; --font-body:'Inter',sans-serif;
    --radius:18px; --btn-radius:12px; --bubble-radius:16px;
    --primary:#F97316; --primary-light:#FB923C; --accent:#FBBF24; --secondary:#F43F5E;
    --bg:#FFF7ED; --bg-secondary:#FEF3C7; --card-bg:#fff;
    --text:#451A03; --text-light:#9A3412; --border:rgba(249,115,22,.1);
    --user-bubble:#F97316; --user-text:#fff; --bot-bubble:#FFF7ED; --bot-text:#451A03;
    --shadow:0 10px 28px rgba(249,115,22,.18);
}
:root[data-skin="forest"] {
    --font-head:'Fraunces',serif; --font-body:'Nunito Sans',sans-serif;
    --radius:16px; --btn-radius:12px; --bubble-radius:16px;
    --primary:#4A7C3A; --primary-light:#6BA855; --accent:#8B6914; --secondary:#5B8FA8;
    --bg:#F0F5EC; --bg-secondary:#E0EBD6; --card-bg:#FFFDF8;
    --text:#1A2E10; --text-light:#4A6B38; --border:#D5E0CB;
    --user-bubble:#4A7C3A; --user-text:#fff; --bot-bubble:#F0F5EC; --bot-text:#1A2E10;
    --shadow:0 8px 22px rgba(74,124,58,.14);
}
:root[data-skin="puredark"] {
    --font-head:'Space Grotesk',sans-serif; --font-body:'Inter',sans-serif;
    --radius:12px; --btn-radius:10px; --bubble-radius:14px;
    --primary:#7C5CFF; --primary-light:#9D7FFF; --accent:#7C5CFF; --secondary:#7C5CFF;
    --bg:#000; --bg-secondary:#0a0a0a; --card-bg:#111;
    --text:#f0f0f0; --text-light:#888; --border:#222;
    --user-bubble:#1a1a1a; --user-text:#f0f0f0; --bot-bubble:#0d0d0d; --bot-text:#f0f0f0;
    --shadow:none;
}
:root[data-skin="candypop"] {
    --font-head:'Space Grotesk',sans-serif; --font-body:'Inter',sans-serif;
    --radius:20px; --btn-radius:16px; --bubble-radius:18px;
    --primary:#FF3B6F; --primary-light:#FF6B8A; --accent:#00D9FF; --secondary:#FFE500;
    --bg:#FFF0F5; --bg-secondary:#FFE0EC; --card-bg:#fff;
    --text:#2D1B36; --text-light:#8B5C8E; --border:rgba(0,0,0,.06);
    --user-bubble:#FF3B6F; --user-text:#fff; --bot-bubble:#F0F0FF; --bot-text:#2D1B36;
    --shadow:0 8px 24px rgba(255,59,111,.2);
}
:root[data-skin="hygge"] {
    --font-head:'Manrope',sans-serif; --font-body:'Manrope',sans-serif;
    --radius:16px; --btn-radius:12px; --bubble-radius:16px;
    --primary:#8B7355; --primary-light:#A89280; --accent:#C4A882; --secondary:#7B9E89;
    --bg:#F7F4F0; --bg-secondary:#EDE8E2; --card-bg:#FFFDFB;
    --text:#2C2520; --text-light:#7B6F65; --border:#E5DDD3;
    --user-bubble:#8B7355; --user-text:#fff; --bot-bubble:#F7F4F0; --bot-text:#2C2520;
    --shadow:0 6px 16px rgba(139,115,85,.1);
}
:root[data-skin="synthwave"] {
    --font-head:'Space Grotesk',sans-serif; --font-body:'Space Mono',monospace;
    --radius:8px; --btn-radius:6px; --bubble-radius:8px;
    --primary:#FF2BD6; --primary-light:#FF5CDE; --accent:#00F0FF; --secondary:#7C4DFF;
    --bg:#0d0118; --bg-secondary:#14082a; --card-bg:#1a0d35;
    --text:#f0e0ff; --text-light:#a080c0; --border:#3a1a5a;
    --user-bubble:#FF2BD6; --user-text:#fff; --bot-bubble:#1a1030; --bot-text:#e0c0ff;
    --shadow:0 0 20px rgba(255,43,214,.2);
}
:root[data-skin="washi"] {
    --font-head:'Fraunces',serif; --font-body:'Nunito Sans',sans-serif;
    --radius:12px; --btn-radius:8px; --bubble-radius:12px;
    --primary:#B85450; --primary-light:#D47070; --accent:#7BA17E; --secondary:#C4A882;
    --bg:#FDFBF7; --bg-secondary:#F5F0E8; --card-bg:#FFFEFD;
    --text:#2B1A0E; --text-light:#8B6B4E; --border:#E8E0D5;
    --user-bubble:#B85450; --user-text:#fff; --bot-bubble:#FDFBF7; --bot-text:#2B1A0E;
    --shadow:0 4px 12px rgba(0,0,0,.06);
}
:root[data-skin="encre"] {
    --font-head:'Fraunces',serif; --font-body:'Inter',sans-serif;
    --radius:4px; --btn-radius:4px; --bubble-radius:8px;
    --primary:#1a1a1a; --primary-light:#333; --accent:#C0392B; --secondary:#555;
    --bg:#FAFAFA; --bg-secondary:#f0f0f0; --card-bg:#fff;
    --text:#1a1a1a; --text-light:#666; --border:#ddd;
    --user-bubble:#1a1a1a; --user-text:#fff; --bot-bubble:#f5f5f5; --bot-text:#1a1a1a;
    --shadow:none;
}
:root[data-skin="sunset"] {
    --font-head:'Syne',sans-serif; --font-body:'Manrope',sans-serif;
    --radius:20px; --btn-radius:14px; --bubble-radius:18px;
    --primary:#9D4EDD; --primary-light:#B565E5; --accent:#FF6B6B; --secondary:#F7B32B;
    --bg:#FBF0FF; --bg-secondary:#F5E0FF; --card-bg:#fff;
    --text:#2D1B3D; --text-light:#7B5E8E; --border:rgba(157,78,221,.1);
    --user-bubble:#9D4EDD; --user-text:#fff; --bot-bubble:#FBF0FF; --bot-text:#2D1B3D;
    --shadow:0 10px 30px rgba(157,78,221,.18);
}

/* §2 — VARIANTES (spécificité supérieure → gagnent sur les skins) */

/* Variante DARK : fond sombre + texte clair (paire contrastée) */
:root[data-skin][data-theme-variant="dark"] {
    --bg:#0e0e12; --bg-secondary:#16161f; --card-bg:#1a1a24;
    --text:#e7e7ee; --text-light:#9a9aae; --border:#26263a;
    --bot-bubble:#1f1f2e; --bot-text:#e7e7ee; --user-text:#fff;
}
/* puredark + synthwave : toujours sombres */
:root[data-skin="puredark"][data-theme-variant="light"] {
    --bg:#000; --bg-secondary:#0a0a0a; --card-bg:#111;
    --text:#f0f0f0; --text-light:#888; --border:#222; --bot-bubble:#0d0d0d; --bot-text:#f0f0f0;
}
:root[data-skin="synthwave"][data-theme-variant="light"] {
    --bg:#0d0118; --bg-secondary:#14082a; --card-bg:#1a0d35;
    --text:#f0e0ff; --text-light:#a080c0; --border:#3a1a5a; --bot-bubble:#1a1030; --bot-text:#e0c0ff;
}

/* Variantes COULEUR : changent l'accent (pas le fond) */
:root[data-skin][data-theme-variant="blue"]   { --primary:#3B82F6; --primary-light:#60A5FA; --accent:#1CB0F6; --user-bubble:#3B82F6; }
:root[data-skin][data-theme-variant="pink"]   { --primary:#EC4899; --primary-light:#F472B6; --accent:#FF5CAA; --user-bubble:#EC4899; }
:root[data-skin][data-theme-variant="green"]  { --primary:#10B981; --primary-light:#34D399; --accent:#5CE1C0; --user-bubble:#10B981; }
:root[data-skin][data-theme-variant="orange"] { --primary:#F59E0B; --primary-light:#FBBF24; --accent:#FF9600; --user-bubble:#F59E0B; }
:root[data-skin][data-theme-variant="red"]    { --primary:#EF4444; --primary-light:#F87171; --accent:#FF5C5C; --user-bubble:#EF4444; }
:root[data-skin][data-theme-variant="purple"] { --primary:#8B5CF6; --primary-light:#A78BFA; --accent:#C084FC; --user-bubble:#8B5CF6; }
:root[data-skin][data-theme-variant="cyan"]   { --primary:#06B6D4; --primary-light:#22D3EE; --accent:#2DE2E6; --user-bubble:#06B6D4; }
:root[data-skin][data-theme-variant="teal"]   { --primary:#14B8A6; --primary-light:#2DD4BF; --accent:#5CE1C0; --user-bubble:#14B8A6; }

/* §3 — APPLICATION DES POLICES */
:root[data-skin] body { font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important; }
:root[data-skin] h1, :root[data-skin] h2, :root[data-skin] h3,
:root[data-skin] .greeting, :root[data-skin] .btn, :root[data-skin] .msg-label,
:root[data-skin] .chip, :root[data-skin] .settings-tab, :root[data-skin] .brand,
:root[data-skin] .screen-header h2 {
    font-family: var(--font-head, 'Inter', sans-serif) !important;
}
/* Police personnalisée utilisateur (surcharge tout) */
:root[data-custom-font-body] body { font-family: var(--custom-font-body) !important; }
:root[data-custom-font-head] h1, :root[data-custom-font-head] h2, :root[data-custom-font-head] h3,
:root[data-custom-font-head] .btn, :root[data-custom-font-head] .greeting,
:root[data-custom-font-head] .msg-label, :root[data-custom-font-head] .chip,
:root[data-custom-font-head] .brand, :root[data-custom-font-head] .settings-tab {
    font-family: var(--custom-font-head) !important;
}