/* tokens.css – Lernreise 4.0 Design-Tokens
   Gemeinsame Grundlage für Kinderwelt, Elternbereich und Administration.
   Die deutschen Namen (--primaer, --tinte …) bleiben erhalten, damit alle bestehenden Komponenten
   automatisch das neue Erscheinungsbild übernehmen.
   Kontraste: Text mindestens 4,5:1 (P8). Fehlerfarbe bleibt warmes Amber, nie Rot (P6). */

@import url("https://fonts.googleapis.com/css2?family=Andika:wght@400;700&family=Baloo+2:wght@600;700;800&display=swap");

:root {
  /* Schrift: Andika für Lesetext und Ziffern (Leseanfänger), Baloo 2 nur für kurze Überschriften. */
  --font: "Andika", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --font-titel: "Baloo 2", "Andika", "Segoe UI", system-ui, sans-serif;

  /* Flächen */
  --papier: #f3f5fc;
  --flaeche: #ffffff;
  --flaeche-2: #eef1fb;
  --linie: #dde2f2;
  --linie-stark: #c3cbe6;

  /* Text */
  --tinte: #1c2141;        /* 15:1 auf Weiß */
  --tinte-weich: #4d5578;  /* 7,2:1 */

  /* Marke: Abenteuer-Indigo mit Sonnengelb */
  --primaer: #4338ca;      /* 7,6:1 mit weißer Schrift */
  --primaer-tief: #2e2890;
  --primaer-hell: #eceeff;
  --primaer-mittel: #c7cbff;
  --sonne: #ffc83d;
  --sonne-tief: #c98a00;
  --sonne-hell: #fff5d6;
  --koralle: #ff7a6b;
  --himmel: #7cc4ff;

  /* Rückmeldung: Grün für geschafft, Amber für „Schau mal“ (kein Rot) */
  --gut: #0e7f56;          /* 5,1:1 */
  --gut-tief: #0a5e40;
  --gut-hell: #e2f7ee;
  --schau: #a45308;        /* 5,6:1 */
  --schau-hell: #fff3e0;

  /* Dienes-Material bleibt blau/orange (Wiedererkennung) */
  --a: #3b7ff0; --a-tief: #1f5fc4;
  --b: #f59e1b; --b-tief: #b86e00;

  /* Welten */
  --wiese: #22a35a; --wiese-hell: #e3f7ea;
  --huegel: #ef8a17; --huegel-hell: #fff0dc;
  --turm: #8a5cf6;  --turm-hell: #f1eaff;
  --berg: #2f7fe0;  --berg-hell: #e4f0ff;
  --insel: #0f9e9b; --insel-hell: #dcf6f4;

  /* Form */
  --radius: 26px;
  --radius-klein: 16px;
  --radius-pille: 999px;

  /* Tiefe: „taktile“ Unterkante + weicher Schatten */
  --schatten: 0 18px 40px -12px rgba(28, 33, 65, .22);
  --schatten-weich: 0 6px 18px -6px rgba(28, 33, 65, .14);
  --kante: 0 5px 0 var(--linie-stark);

  /* Bewegung */
  --dauer: 240ms;
  --kurve: cubic-bezier(.2, .8, .2, 1);
  --feder: cubic-bezier(.34, 1.56, .64, 1);
}

body.kontrast {
  --papier: #ffffff; --flaeche: #ffffff; --flaeche-2: #f2f2f2; --tinte: #000000; --tinte-weich: #222222;
  --linie: #000000; --linie-stark: #000000;
  --primaer: #0033cc; --primaer-tief: #002299; --primaer-hell: #e8eeff;
  --a: #0044dd; --b: #cc6600; --gut: #006622; --schau: #884400;
  --schatten: none; --schatten-weich: none; --kante: none;
}