/* LernNord: Farb- und Schrift-Tokens (Entwurf, 2026-10-24; an das App-Design angepasst am selben Tag).
   Gleiche Farbfamilie wie die Kinder-App (app/static/lernnord.css): Navy, Rot-Orange als Signatur, Gold, Meerblau.
   Rot-Orange heißt nie „falsch“; falsch = Sand.
   Regel: Die sechs Grundfarben sind Flächen- und Bildfarben. Für Text gibt es eigene "-text"-Töne,
   die auf Weiß, Polar und Himmel mindestens 4.5:1 erreichen. */

:root {
  /* ---- Grundfarben (Namen aus dem ersten Entwurf, Werte aus dem App-Design) ---- */
  --ln-tiefsee: #1A2148;      /* Text, Konturen, dunkle Flächen */
  --ln-lagune: #3D7FB8;       /* Meer */
  --ln-sonne: #F2BE44;        /* Nordstern, Sterne, Gold */
  --ln-koralle: #E05A2E;      /* Flaggen, Serie, kleine Akzente */
  --ln-palme: #5AA84E;        /* richtig, Gras, "sitzt" */
  --ln-himmel: #EEF4F8;       /* Seitengrund am Tag */

  /* ---- Signatur aus der App: Hauptknopf, Level, Flaggen ---- */
  --ln-sig: #CC3A0E;
  --ln-sig-hell: #FF5D30;
  --ln-sig-press: #8F2606;
  /* falsch = Sand, wie in der App */
  --ln-sand-flaeche: #FFF1D2;
  --ln-sand-text: #6A4800;

  /* ---- neu für LernNord ---- */
  --ln-nordnacht: #0B1024;    /* Himmel im Norden: Grund für den Schluss und die Kartenspitze */
  --ln-polar: #f5fbff;        /* hellste Fläche, Papier der Karten */
  --ln-sand: #f7e3ae;         /* Inselsand (aus der App) */
  --ln-flachwasser: #DDEFFC;  /* Flachwasser um die Inseln */
  --ln-abendlicht: #FFF3D1;   /* warmer Grund gegen Ende der Seite */

  /* ---- Text-Töne (AA auf Polar/Himmel/Weiß) ---- */
  --ln-tiefsee-soft: #4A4F5A; /* Nebentext */
  --ln-lagune-text: #CC3A0E;  /* Links (Rot-Orange wie in der App) */
  --ln-koralle-text: #B8330C;
  --ln-sonne-text: #8A5E00;
  --ln-palme-text: #1B7F43;

  /* ---- Druck-Töne für den Knopf-Sockel (wie in der App) ---- */
  --ln-lagune-press: #2F6E9E;
  --ln-sonne-press: #B57F10;
  --ln-koralle-press: #8F2606;

  /* ---- Schrift ---- */
  --ln-font-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --ln-font-text: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Form und Bewegung ---- */
  --ln-radius-s: 12px;
  --ln-radius: 20px;
  --ln-radius-l: 32px;
  --ln-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ln-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ln-shadow-1: 0 1px 0 rgba(22, 50, 79, 0.06), 0 8px 18px -12px rgba(22, 50, 79, 0.35);
  --ln-shadow-2: 0 2px 0 rgba(22, 50, 79, 0.06), 0 18px 36px -18px rgba(22, 50, 79, 0.45);
  --ln-shadow-3: 0 3px 0 rgba(22, 50, 79, 0.05), 0 34px 60px -26px rgba(22, 50, 79, 0.55);
  --ln-edge: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}