/* ═══════════════════════════════════════════════════════
   själ · Farben
   Zentrale Farbvorlage für alle Seiten
   Datei: sjael-farben.css
   ═══════════════════════════════════════════════════════ */

:root {
  /* ─────────────────────────────────────────────
     1. FUNDAMENT · für alle Seiten
     ───────────────────────────────────────────── */

  --farbe-creme: #FCFAF5;
  --farbe-papier: #FAF8F5; /* Hintergrund */
  --farbe-leinen: #F0E8D8;
  --farbe-sand: #E8E2DA; /* Rand */
  --farbe-nebel: #928c84; /* Text hell */
  --farbe-tusche: #3A3632; /* Text */
  --farbe-gruen: #5a6e5c; 
 --farbe-gruen-hell: #edf2ed; 

  /* Praktische Kurz-Namen für deine Webseiten */
  --bg: var(--farbe-papier);
  --card: #FFFFFF;
  --text: var(--farbe-tusche);
  --soft: #6A655E; /* Text weich */
  --muted: var(--farbe-nebel);
  --line: var(--farbe-sand);
  --border: var(--farbe-sand);
  --shadow: rgba(107, 95, 80, 0.06);

  /* Falls manche deiner Seiten andere Namen verwenden */
  --text-soft: var(--soft);
  --text-light: var(--muted);
  --bg-card: var(--card);


  

  /* ─────────────────────────────────────────────
     2. WESENFARBEN · v3 · erste 19 Figuren
     Nur Figurenfarben – Fundament bleibt unverändert
     ───────────────────────────────────────────── */

  /* Trine · Traurigkeit · Regenfensterblau */
  --trine-light: #EFF2F5;
  --trine-medium: #B9C2CC;
  --trine: #8798AA;
  --trine-dark: #5D6771;
  --trine-accent: #B7A9C8;
  --trine-flieder: var(--trine-accent);
  --trine-nebel: #E8E3DB;

  /* Pør · Angst · Laternennacht */
  --poer-light: #E8EBF0;
  --poer-medium: #8E9CAC;
  --poer: #314565;
  --poer-dark: #2F3440;
  --poer-accent: #E8C96A;

  /* Frida · Freude · Buttersonne */
  --frida-light: #F9F0DA;
  --frida-medium: #EECF83;
  --frida: #E1B646;
  --frida-dark: #917839;
  --frida-accent: #8BAE7D;
  --frida-gras: var(--frida-accent);

  /* Ville · Wut · Ofenglut */
  --ville-light: #F5ECE8;
  --ville-medium: #D99483;
  --ville: #BF4A32;
  --ville-dark: #7B3F2F;
  --ville-accent: #F0B84A;

  /* Mats · Mut · Flusspfadgrün */
  --mats-light: #ECF0EF;
  --mats-medium: #9EBAB3;
  --mats: #4F7C70;
  --mats-dark: #3D544E;
  --mats-accent: #8FBCAF;

  /* Sivi · Scham · Apfelblütenhaut */
  --sivi-light: #F6EDED;
  --sivi-medium: #DDB3B8;
  --sivi: #C98A92;
  --sivi-dark: #835C5F;
  --sivi-accent: #F0C8A0;

  /* Lotte · Überforderung · Teekessel-Aprikose */
  --lotte-light: #F8EFE8;
  --lotte-medium: #E4B58F;
  --lotte: #D99A6B;
  --lotte-dark: #8B6649;
  --lotte-accent: #C76680;

  /* Fíla · Hochsensibilität · Mooslicht */
  --fila-light: #EEF1ED;
  --fila-medium: #AEBDAA;
  --fila: #6F846D;
  --fila-dark: #4E5849;
  --fila-accent: #C8C0A8;

  /* Grímur · Selbstsabotage · Riegelgraphit */
  --grimur-light: #E9E8E7;
  --grimur-medium: #999390;
  --grimur: #4A4340;
  --grimur-dark: #38302D;
  --grimur-accent: #8B8F70;

  /* Frau Elli · Liebe · Apfelschalen-Rosé */
  --elli-light: #F6EEEC;
  --elli-medium: #D8A096;
  --elli: #B96A58;
  --elli-dark: #794D42;
  --elli-accent: #D89A8C;

  /* Prof. van Knotenig · Verstand · Grübelturm-Blau */
  --prof-light: #EDF1F5;
  --prof-medium: #A7B8CB;
  --prof: #5B7EA6;
  --prof-dark: #42566E;
  --prof-accent: #C6A15B;

  /* Kupfersson · Alchimist · Kupferfunke */
  --kupfersson-light: #F5ECE4;
  --kupfersson-medium: #D6A47B;
  --kupfersson: #B87333;
  --kupfersson-dark: #774E2C;
  --kupfersson-accent: #D9A441;

  /* Lovise · Zauberin · Mondmauve */
  --lovise-light: #F0EDF2;
  --lovise-medium: #B7AEBF;
  --lovise: #7B6B8A;
  --lovise-dark: #554B5A;
  --lovise-accent: #C8B8C9;

  /* Hollundra · Kräuterfee · Holunder-Salbei */
  --hollundra-light: #EEF2EC;
  --hollundra-medium: #A8BD9C;
  --hollundra: #6B8E5A;
  --hollundra-dark: #4B6040;
  --hollundra-accent: #C7A86D;

  /* Olia · Geruch · Birkenkraut */
  --olia-light: #F2F3EA;
  --olia-medium: #C4CEA0;
  --olia: #8FA15F;
  --olia-dark: #616B43;
  --olia-accent: #D4B078;

  /* Berri · Geschmack · Knackelbeere */
--berri-light: #F7EAED;
--berri-medium: #DEA3B1;
--berri: #b86363;
--berri-dark: #833939;
--berri-accent: #F2C6C2;

  /* Jimme · Sehen · Fjordblick */
  --jimme-light: #ECF6F9;
  --jimme-medium: #A2D0DE;
  --jimme: #5FAFCB;
  --jimme-dark: #457382;
  --jimme-accent: #C8E8F4;

  /* Tøni · Hören · Schieferklang */
  --toni-light: #EDEDEC;
  --toni-medium: #ACAEB3;
  --toni: #6F7480;
  --toni-dark: #4C4F54;
  --toni-accent: #C4BDAE;

  /* Milla · Fühlen · Wangenwärme */
  --milla-light: #F6EFED;
  --milla-medium: #DDB8B0;
  --milla: #C98F82;
  --milla-dark: #835F57;
  --milla-accent: #F4E4DE;

}


/* ═══════════════════════════════════════════════════════
   THEMEN-KLASSEN
   Damit eine Seite nur sagen muss: body class="theme-trine"
   ═══════════════════════════════════════════════════════ */

body.theme-willkommen,
body.theme-neutral {
  --page-color: var(--elli);
  --page-color-light: var(--elli-light);
  --page-color-medium: var(--elli-medium);
  --page-color-dark: var(--elli-dark);
  --page-color-accent: var(--elli-accent);
}


body.theme-trine {
  --page-color: var(--trine);
  --page-color-light: var(--trine-light);
  --page-color-medium: var(--trine-medium);
  --page-color-dark: var(--trine-dark);
  --page-color-accent: var(--trine-accent);
}

body.theme-poer {
  --page-color: var(--poer);
  --page-color-light: var(--poer-light);
  --page-color-medium: var(--poer-medium);
  --page-color-dark: var(--poer-dark);
  --page-color-accent: var(--poer-accent);
}

body.theme-frida {
  --page-color: var(--frida);
  --page-color-light: var(--frida-light);
  --page-color-medium: var(--frida-medium);
  --page-color-dark: var(--frida-dark);
  --page-color-accent: var(--frida-accent);
}

body.theme-ville {
  --page-color: var(--ville);
  --page-color-light: var(--ville-light);
  --page-color-medium: var(--ville-medium);
  --page-color-dark: var(--ville-dark);
  --page-color-accent: var(--ville-accent);
}

body.theme-mats {
  --page-color: var(--mats);
  --page-color-light: var(--mats-light);
  --page-color-medium: var(--mats-medium);
  --page-color-dark: var(--mats-dark);
  --page-color-accent: var(--mats-accent);
}

body.theme-sivi {
  --page-color: var(--sivi);
  --page-color-light: var(--sivi-light);
  --page-color-medium: var(--sivi-medium);
  --page-color-dark: var(--sivi-dark);
  --page-color-accent: var(--sivi-accent);
}

body.theme-lotte {
  --page-color: var(--lotte);
  --page-color-light: var(--lotte-light);
  --page-color-medium: var(--lotte-medium);
  --page-color-dark: var(--lotte-dark);
  --page-color-accent: var(--lotte-accent);
}

body.theme-fila {
  --page-color: var(--fila);
  --page-color-light: var(--fila-light);
  --page-color-medium: var(--fila-medium);
  --page-color-dark: var(--fila-dark);
  --page-color-accent: var(--fila-accent);
}

body.theme-grimur {
  --page-color: var(--grimur);
  --page-color-light: var(--grimur-light);
  --page-color-medium: var(--grimur-medium);
  --page-color-dark: var(--grimur-dark);
  --page-color-accent: var(--grimur-accent);
}

body.theme-elli {
  --page-color: var(--elli);
  --page-color-light: var(--elli-light);
  --page-color-medium: var(--elli-medium);
  --page-color-dark: var(--elli-dark);
  --page-color-accent: var(--elli-accent);
}

body.theme-prof {
  --page-color: var(--prof);
  --page-color-light: var(--prof-light);
  --page-color-medium: var(--prof-medium);
  --page-color-dark: var(--prof-dark);
  --page-color-accent: var(--prof-accent);
}

body.theme-kupfersson {
  --page-color: var(--kupfersson);
  --page-color-light: var(--kupfersson-light);
  --page-color-medium: var(--kupfersson-medium);
  --page-color-dark: var(--kupfersson-dark);
  --page-color-accent: var(--kupfersson-accent);
}

body.theme-lovise {
  --page-color: var(--lovise);
  --page-color-light: var(--lovise-light);
  --page-color-medium: var(--lovise-medium);
  --page-color-dark: var(--lovise-dark);
  --page-color-accent: var(--lovise-accent);
}

body.theme-hollundra {
  --page-color: var(--hollundra);
  --page-color-light: var(--hollundra-light);
  --page-color-medium: var(--hollundra-medium);
  --page-color-dark: var(--hollundra-dark);
  --page-color-accent: var(--hollundra-accent);
}

body.theme-olia {
  --page-color: var(--olia);
  --page-color-light: var(--olia-light);
  --page-color-medium: var(--olia-medium);
  --page-color-dark: var(--olia-dark);
  --page-color-accent: var(--olia-accent);
}

body.theme-berri {
  --page-color: var(--berri);
  --page-color-light: var(--berri-light);
  --page-color-medium: var(--berri-medium);
  --page-color-dark: var(--berri-dark);
  --page-color-accent: var(--berri-accent);
}

body.theme-jimme {
  --page-color: var(--jimme);
  --page-color-light: var(--jimme-light);
  --page-color-medium: var(--jimme-medium);
  --page-color-dark: var(--jimme-dark);
  --page-color-accent: var(--jimme-accent);
}

body.theme-toni {
  --page-color: var(--toni);
  --page-color-light: var(--toni-light);
  --page-color-medium: var(--toni-medium);
  --page-color-dark: var(--toni-dark);
  --page-color-accent: var(--toni-accent);
}

body.theme-milla {
  --page-color: var(--milla);
  --page-color-light: var(--milla-light);
  --page-color-medium: var(--milla-medium);
  --page-color-dark: var(--milla-dark);
  --page-color-accent: var(--milla-accent);
}

/* Optionale Helferklassen */
.wesen-card {
  background: var(--page-color-light);
  border: 1px solid var(--page-color-medium);
  color: var(--text);
  box-shadow: 0 14px 36px var(--shadow);
}

.wesen-badge {
  background: var(--page-color);
  color: #FFFFFF;
}

.wesen-link,
.wesen-akzent {
  color: var(--page-color-dark);
}

.wesen-border {
  border-color: var(--page-color-accent);
}