/* =====================================================================
   Lernhelden – Stylesheets (seit Version 8 aufgeteilt)

   Reihenfolge der Dateien = Reihenfolge der <link> in lernhelden_plattform.html (wichtig für die Kaskade):
     tokens · basis · kopf-navigation · start-module · training · formate · lesen-diktat ·
     erfolge-dialoge · lernpfad · schreibwerkstatt · wissen · anschauungen · bewegung · mobil

   Farben NIE direkt in Komponenten setzen, sondern über Tokens. Das Dark Mode
   ersetzt nur Tokens – dadurch gibt es keine Einzelregeln pro Komponente.
   Die Themen hängen an <html data-grade="1…4">, gesetzt in renderGradeState() (js/start/modulkarten.js)
   und schon im <head>, damit beim Laden nichts aufblitzt.
   ===================================================================== */
/* Tokens: neutrales Thema, vier Klassen-Themen (html[data-grade]) und Dark Mode (html[data-theme="dark"]).
   Nur hier stehen Farben. tests/theme.test.js prüft die Kontraste aller Token-Blöcke. */

/* ---------- 1. Tokens ---------- */
:root{
  --fs-root:17px;
  --tap:48px;
  --radius:22px;
  --radius-sm:14px;
  --cols:3;
  --card-min:230px;

  --bg:#f4f5fb;
  --bg-2:#eaf6f6;
  --panel:#ffffff;
  --surface:#f7f8fc;
  --ink:#172033;
  --muted:#5a6479;
  --line:#dde2ef;
  --brand:#5443d6;
  --brand-2:#0e7c86;
  --on-brand:#ffffff;
  --brand-ink:#5443d6;
  --soft:#eeedff;
  --chip-ink:#3b2fb0;
  --hero-1:#5b4ae6;
  --hero-2:#0f766e;

  --good:#15703f;
  --good-soft:#e3f8ea;
  --good-line:#a7e3bd;
  --bad:#b42318;
  --bad-soft:#fdecea;
  --bad-line:#f6b8b1;
  --warn-soft:#fff6db;
  --warn-line:#f5d98a;
  --warn-ink:#6b4a00;
  --info-soft:#eaf2ff;
  --info-line:#bcd3f7;
  --info-ink:#1e3a5f;

  --shadow:0 18px 40px rgba(23,32,51,.12);
  --shadow-sm:0 6px 16px rgba(23,32,51,.07);
  --akzent-gold:#f59e0b;

  /* Anschauungen (css/anschauungen.css): zwei Plättchenfarben, Linien, Uhrzeiger, Würfel, Spiegelachse, Geld.
     theme.test.js prüft Plättchen, Zeiger und Achse mit mindestens 3:1 gegen --panel und --surface. */
  --anschauung-a:#c2410c; --anschauung-b:#1d4ed8; --anschauung-linie:#8792a8; --anschauung-leer:#eef1f7;
  --uhr-stunde:#1d4ed8; --uhr-minute:#b91c1c; --spiegel-achse:#b91c1c;
  --wuerfel-vorne:#60a5fa; --wuerfel-oben:#bfdbfe; --wuerfel-seite:#3b82f6; --wuerfel-kante:#1e3a8a;
  --muenze-euro:#d4a017; --muenze-gold:#e2b93b; --muenze-kupfer:#c07a45; --schein:#a7d7b8; --geld-ink:#1f2937;

  /* Bewegung (css/bewegung.css, js/ui/bewegung.js). Klasse 1 etwas weicher und länger, Klasse 4 knapper.
     html[data-bewegung="wenig"] überschreibt die Werte in css/bewegung.css. */
  --dauer-kurz:140ms; --dauer-mittel:240ms; --dauer-lang:420ms; --versatz:170ms;
  --kurve-standard:cubic-bezier(.2,.7,.2,1); --kurve-raus:cubic-bezier(.4,0,1,1); --kurve-feder:cubic-bezier(.34,1.56,.64,1);
  --weg-klein:5px; --huepfen:1.06;
}

/* Klasse 1 – Sonnenwiese: warm, sehr groß, sehr rund */
:root[data-grade="1"]{
  --fs-root:20px; --tap:60px; --radius:30px; --radius-sm:20px; --cols:2; --card-min:260px;
  --bg:#fff7e3; --bg-2:#effbe8; --panel:#ffffff; --surface:#fffaf0;
  --ink:#3a2610; --muted:#6e5231; --line:#f3d9a8;
  --brand:#c2410c; --brand-ink:#c2410c; --brand-2:#15803d; --soft:#ffedd5; --chip-ink:#9a3412;
  --hero-1:#b45309; --hero-2:#c2410c;
  --dauer-kurz:170ms; --dauer-mittel:290ms; --dauer-lang:520ms; --versatz:210ms; --weg-klein:6px; --huepfen:1.1;
}
/* Klasse 2 – Abenteuer-Insel: Meer und Türkis */
:root[data-grade="2"]{
  --fs-root:18px; --tap:54px; --radius:26px; --radius-sm:18px; --cols:3; --card-min:240px;
  --bg:#ebfbfd; --bg-2:#e8f1ff; --panel:#ffffff; --surface:#f4fcfd;
  --ink:#0b3440; --muted:#3b6470; --line:#bfe6ee;
  --brand:#0e7490; --brand-ink:#0e7490; --brand-2:#1d4ed8; --soft:#d5f5fa; --chip-ink:#155e75;
  --hero-1:#0e7490; --hero-2:#1d4ed8;
}
/* Klasse 3 – Forscher-Station: Violett und Indigo */
:root[data-grade="3"]{
  --fs-root:17px; --tap:48px; --radius:22px; --radius-sm:14px; --cols:3; --card-min:230px;
  --bg:#f5f3ff; --bg-2:#eef0ff; --panel:#ffffff; --surface:#faf9ff;
  --ink:#23124a; --muted:#56487a; --line:#ddd6fe;
  --brand:#6d28d9; --brand-ink:#6d28d9; --brand-2:#4338ca; --soft:#ede9fe; --chip-ink:#5b21b6;
  --hero-1:#7c3aed; --hero-2:#5b5bd6;
}
/* Klasse 4 – Sternen-Mission: Nachtblau, klar, dichter */
:root[data-grade="4"]{
  --fs-root:16px; --tap:44px; --radius:16px; --radius-sm:10px; --cols:4; --card-min:210px;
  --bg:#eef2f9; --bg-2:#e6f4f7; --panel:#ffffff; --surface:#f6f8fc;
  --ink:#0f172a; --muted:#475569; --line:#cfd8e6;
  --brand:#1e40af; --brand-ink:#1e40af; --brand-2:#0e7490; --soft:#e0e7ff; --chip-ink:#1e3a8a;
  --hero-1:#1e3a8a; --hero-2:#0e7490;
  --dauer-kurz:120ms; --dauer-mittel:200ms; --dauer-lang:340ms; --versatz:130ms; --weg-klein:4px; --huepfen:1.04;
  --kurve-feder:cubic-bezier(.3,1.3,.6,1);
}

/* Dark Mode: gemeinsame Flächen */
:root[data-theme="dark"]{
  --anschauung-a:#fb923c; --anschauung-b:#60a5fa; --anschauung-linie:#6b7690; --anschauung-leer:#252a38;
  --uhr-stunde:#93c5fd; --uhr-minute:#fca5a5; --spiegel-achse:#f87171;
  --wuerfel-vorne:#3b82f6; --wuerfel-oben:#93c5fd; --wuerfel-seite:#1d4ed8; --wuerfel-kante:#bfdbfe;
  --bg:#0f1117; --bg-2:#0d1a1a; --panel:#1a1d27; --surface:#141620;
  --ink:#e8eaf2; --muted:#a3acc2; --line:#2e3244;
  --brand:#5b4ae6; --brand-ink:#b3a9ff; --soft:#23234a; --chip-ink:#c7c2ff;
  --hero-1:#3b2fb0; --hero-2:#0b5f66;
  --good:#4ade80; --good-soft:#0d2d1a; --good-line:#166534;
  --bad:#fca5a5; --bad-soft:#3a1518; --bad-line:#7f1d1d;
  --warn-soft:#2a2208; --warn-line:#5c4a0a; --warn-ink:#fcd34d;
  --info-soft:#13233d; --info-line:#1e3a5f; --info-ink:#bfdbfe;
  --shadow:0 18px 40px rgba(0,0,0,.45);
  --shadow-sm:0 6px 16px rgba(0,0,0,.35);
}
:root[data-theme="dark"][data-grade="1"]{
  --bg:#17110a; --bg-2:#0f170b; --panel:#231a10; --surface:#1c150c; --ink:#fbead3; --muted:#d6b48a; --line:#4a3520;
  --brand:#c2410c; --brand-ink:#fdba74; --soft:#3a2410; --chip-ink:#fdba74; --hero-1:#9a5a06; --hero-2:#a1400f;
}
:root[data-theme="dark"][data-grade="2"]{
  --bg:#08161b; --bg-2:#0a1424; --panel:#0f2229; --surface:#0b1b21; --ink:#dff6fb; --muted:#94c5d0; --line:#1e4450;
  --brand:#0e7490; --brand-ink:#67e8f9; --soft:#0f3440; --chip-ink:#67e8f9; --hero-1:#0b6a80; --hero-2:#1e4fb0;
}
:root[data-theme="dark"][data-grade="3"]{
  --bg:#110b1f; --bg-2:#0e0f24; --panel:#1b1430; --surface:#150f26; --ink:#ece6ff; --muted:#b6a8dc; --line:#352a57;
  --brand:#6d28d9; --brand-ink:#c4b5fd; --soft:#2a1d4d; --chip-ink:#c4b5fd; --hero-1:#5b30b8; --hero-2:#3a3aa8;
}
:root[data-theme="dark"][data-grade="4"]{
  --bg:#070b16; --bg-2:#06141a; --panel:#111827; --surface:#0c1220; --ink:#e5ecf6; --muted:#9fb0c7; --line:#243044;
  --brand:#1e40af; --brand-ink:#93c5fd; --soft:#16234a; --chip-ink:#a5b4fc; --hero-1:#172f6e; --hero-2:#0b5a6b;
}