/* ---------- 6 kleurthema's, allemaal in dezelfde ronde, schattige stijl
   (geen losse "stijlen" meer zoals voorheen Soft/Core/Bold — alleen de
   kleur van Tama + de rest van de app wisselt mee). Ink, bubble-user en
   alert blijven bewust constant over alle 6, voor herkenbaarheid.
   ------------------------------------------------------------
   Gedeeld bestand (los van index.html) zodat elke pagina binnen Tama
   (chat, installeren.html, etc.) dezelfde thema-kleuren gebruikt zonder
   duplicatie — één plek om een thema aan te passen of toe te voegen. */
:root, [data-theme="pink"] {
  --bg: #FDF3F2;
  --card: #FFFFFF;
  --ink: #4A3F4E;
  --ink-soft: #AB9FB0;
  --accent: #F2879E;
  --bubble-user: #4A3F4E;
  --bubble-user-text: #FFFFFF;
  --bubble-tama: #FCEEF3;
  --bubble-tama-text: #4A3F4E;
  --alert: #D96B72;
  --alert-bg: #FDEDEE;
  --warn-bg: #FEF6E3;
  --warn-border: #F2D98A;
  --warn-text: #8A6D1D;
  --line: #F5E6EA;
  --tama-grad-1: #FFF6F8;
  --tama-grad-2: #FFDCE8;
  --tama-grad-3: #F2D4EE;
}

/* Enige "donkere" thema van de 6 — echt een donkere achtergrond/kaarten,
   niet alleen een donkere Tama-kleur op een verder lichte pagina. Daarom
   wijkt --bubble-user hier ook bewust af van de andere 5 (die gebruiken
   overal dezelfde donkere inkt-kleur als bubbel — dat zou hier bijna
   onzichtbaar worden tegen de donkere achtergrond, dus hier de accentkleur
   i.p.v. --ink). --ink zelf wordt licht i.p.v. donker, wat via var(--ink)
   ook automatisch de ogen/mond van Tama's gezicht licht maakt op deze
   donkere ondergrond (zie .tama-svg/.mini-face-svg/.auth-face paths).
   Zie ook THEME_PALETTES/SWATCH_EXPRESSIONS in de JS in index.html. */
[data-theme="black"] {
  --bg: #18171C;
  --card: #221F26;
  --ink: #F0ECEF;
  --ink-soft: #948C9B;
  --accent: #D9A566;
  --bubble-user: #D9A566;
  --bubble-user-text: #18171C;
  --bubble-tama: #2C2933;
  --bubble-tama-text: #F0ECEF;
  --alert: #E8918D;
  --alert-bg: #3A2429;
  --warn-bg: #3A331F;
  --warn-border: #6B5A2E;
  --warn-text: #E8C97A;
  --line: #322E38;
  --tama-grad-1: #4A4650;
  --tama-grad-2: #2A2730;
  --tama-grad-3: #131218;
}

[data-theme="green"] {
  --bg: #F3FBF5;
  --card: #FFFFFF;
  --ink: #4A3F4E;
  --ink-soft: #AB9FB0;
  --accent: #5FBC7D;
  --bubble-user: #4A3F4E;
  --bubble-user-text: #FFFFFF;
  --bubble-tama: #E3F5E8;
  --bubble-tama-text: #4A3F4E;
  --alert: #D96B72;
  --alert-bg: #FDEDEE;
  --warn-bg: #FEF6E3;
  --warn-border: #F2D98A;
  --warn-text: #8A6D1D;
  --line: #DCEEDF;
  --tama-grad-1: #F3FBF5;
  --tama-grad-2: #D7F0DD;
  --tama-grad-3: #B8E6C4;
}

[data-theme="blue"] {
  --bg: #F1F8FE;
  --card: #FFFFFF;
  --ink: #4A3F4E;
  --ink-soft: #AB9FB0;
  --accent: #5CA8DE;
  --bubble-user: #4A3F4E;
  --bubble-user-text: #FFFFFF;
  --bubble-tama: #DEF0FB;
  --bubble-tama-text: #4A3F4E;
  --alert: #D96B72;
  --alert-bg: #FDEDEE;
  --warn-bg: #FEF6E3;
  --warn-border: #F2D98A;
  --warn-text: #8A6D1D;
  --line: #DCEBF5;
  --tama-grad-1: #F2FAFF;
  --tama-grad-2: #D6EEFB;
  --tama-grad-3: #B8DFF5;
}

[data-theme="purple"] {
  --bg: #F8F5FE;
  --card: #FFFFFF;
  --ink: #4A3F4E;
  --ink-soft: #AB9FB0;
  --accent: #A87EDE;
  --bubble-user: #4A3F4E;
  --bubble-user-text: #FFFFFF;
  --bubble-tama: #ECE4FB;
  --bubble-tama-text: #4A3F4E;
  --alert: #D96B72;
  --alert-bg: #FDEDEE;
  --warn-bg: #FEF6E3;
  --warn-border: #F2D98A;
  --warn-text: #8A6D1D;
  --line: #E7E0F5;
  --tama-grad-1: #F8F5FF;
  --tama-grad-2: #E8DFFB;
  --tama-grad-3: #D6C6F2;
}

[data-theme="cream"] {
  --bg: #FDF9F2;
  --card: #FFFFFF;
  --ink: #4A3F4E;
  --ink-soft: #AB9FB0;
  --accent: #D9A05C;
  --bubble-user: #4A3F4E;
  --bubble-user-text: #FFFFFF;
  --bubble-tama: #F5EBDA;
  --bubble-tama-text: #4A3F4E;
  --alert: #D96B72;
  --alert-bg: #FDEDEE;
  --warn-bg: #FEF6E3;
  --warn-border: #F2D98A;
  --warn-text: #8A6D1D;
  --line: #F0E4D0;
  --tama-grad-1: #FFFDF9;
  --tama-grad-2: #F5EBDA;
  --tama-grad-3: #EAD8BC;
}