/* Kidixi-Marke: die eine Quelle aller Gestaltungswerte (Masterprompt Lernwelt-Gestaltung, Abschnitt 5).
   Eingebunden von der App (web/index.html), der Startseite (/start/) und der Spendenseite (/spenden/).
   Die Buchseiten (/grenzen-setzen/, /gemeinsam/, /lernen/, /abmachen/) tragen bewusst die Gestaltung ihres Buches und lesen diese Datei nicht.

   Regeln:
   - Hier stehen nur Werte (Custom Properties mit Vorsatz --kx-), keine Regeln für Elemente.
   - Seiten lesen die Werte, sie schreiben sie nicht um. Ausnahme: die Gestaltung je Welt im Kinderbereich (stil.css, html[data-welt]).
   - Dunkelmodus gilt nur, wo die Seite es erlaubt: <html data-farbschema="auto">. Die Startseite bleibt hell. */

:root {
  /* Farben der Marke */
  --kx-wald: #1B4332;
  --kx-wald-tief: #10291F;
  --kx-wald-mittel: #2D6A4F;
  --kx-gruen: #52B788;
  --kx-gruen-tief: #065F46;        /* Links auf hellem Grund */
  --kx-knopf: #2F7D57;             /* Knopfgrund, weiße Schrift erreicht 4,5:1 */
  --kx-minze: #F0FFF4;
  --kx-minze-tief: #D8F3DC;
  --kx-minze-rand: #A7F3D0;
  --kx-bernstein: #F59E0B;
  --kx-bernstein-tief: #B45309;    /* Vorzeilen und Akzente als Schrift */
  --kx-bernstein-hell: #FFFBEB;
  --kx-bernstein-zart: #FDE7C4;
  --kx-sand: #FFF8EC;
  --kx-ueberschrift: #1B4332;      /* Überschriften: Waldgrün, im Dunkelmodus hell */
  --kx-link: #065F46;

  /* Text und Flächen */
  --kx-text: #22312A;
  --kx-text-leise: #56635C;
  --kx-linie: #E2EBE5;
  --kx-flaeche: #FFFFFF;
  --kx-grund: #F7FAF8;
  --kx-auf-dunkel: #E7F3EC;        /* Text auf Waldgrün */
  --kx-auf-dunkel-leise: #B7D9C5;

  /* Zustände */
  --kx-ok: #52B788;
  --kx-ok-hell: #F0FFF4;
  --kx-ok-rand: #A7F3D0;
  --kx-rot: #B91C1C;
  --kx-rot-hell: #FEF2F2;
  --kx-gefahr: #B91C1C;            /* Knopfgrund für Löschen, in beiden Modi gleich (weiße Schrift) */
  --kx-hinweis: #92400E;

  /* Schrift */
  --kx-kopf: "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kx-lese: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kx-kind: "Andika", "Nunito", system-ui, sans-serif;
  --kx-g-xs: .8125rem;
  --kx-g-s: .9375rem;
  --kx-g-m: 1rem;
  --kx-g-l: 1.125rem;
  --kx-g-xl: 1.35rem;
  --kx-g-2xl: clamp(1.5rem, 2.6vw, 1.85rem);
  --kx-g-3xl: clamp(1.7rem, 3.6vw, 2.6rem);
  --kx-g-4xl: clamp(2.2rem, 5vw, 3.4rem);
  --kx-g-5xl: clamp(2.5rem, 6vw, 4.4rem);

  /* Abstände (8er-Raster) */
  --kx-a1: 4px;
  --kx-a2: 8px;
  --kx-a3: 12px;
  --kx-a4: 16px;
  --kx-a5: 24px;
  --kx-a6: 32px;
  --kx-a7: 48px;
  --kx-a8: 64px;
  --kx-a9: 96px;
  --kx-abschnitt: clamp(60px, 8vw, 110px);
  --kx-breit: min(1160px, 100% - 32px);
  --kx-schmal: min(760px, 100% - 32px);

  /* Rundungen */
  --kx-r-feld: 12px;
  --kx-r-kachel: 16px;
  --kx-r-karte: 22px;
  --kx-r-bild: 28px;
  --kx-r-pille: 999px;

  /* Schatten: Karte, große Fläche (Bilder, Held), schwebend (Dialog, Menü) */
  --kx-schatten-karte: 0 8px 28px rgba(16, 41, 31, .09);
  --kx-schatten: 0 18px 44px rgba(16, 41, 31, .12);
  --kx-schatten-schwebend: 0 24px 60px rgba(16, 41, 31, .22);

  /* Bewegung */
  --kx-zeit: .18s;
  --kx-kurve: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root[data-farbschema="auto"] {
    --kx-ueberschrift: #95D5B2;
    --kx-link: #74C69D;
    --kx-minze: #12301F;
    --kx-minze-tief: #183D29;
    --kx-minze-rand: #2D6A4F;
    --kx-bernstein-tief: #FBBF24;
    --kx-bernstein-hell: #2B2210;
    --kx-bernstein-zart: #3A2C10;
    --kx-sand: #14231B;
    --kx-text: #E5ECE8;
    --kx-text-leise: #A3B3AA;
    --kx-linie: #24402F;
    --kx-flaeche: #13261D;
    --kx-grund: #0B1712;
    --kx-ok-hell: #12301F;
    --kx-ok-rand: #2D6A4F;
    --kx-rot: #FCA5A5;
    --kx-rot-hell: #3A1515;
    --kx-hinweis: #FCD34D;
    --kx-schatten-karte: 0 8px 28px rgba(0, 0, 0, .35);
    --kx-schatten: 0 18px 44px rgba(0, 0, 0, .4);
    --kx-schatten-schwebend: 0 24px 60px rgba(0, 0, 0, .55);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --kx-zeit: 0s; }
}