/* abulab Design System – Token-Auszug für die App «kurs»
   Stand: 13.10.2026 · Entwurf 0.3 + Folien/App-Erweiterungen aus Änderungspaket 2 und 3 + Lehrperson in kurs (12.10.) + Plex Sans 500 für Verben und Wege, --loesung für den Lehrpersonen-Rand (13.10.)
   Quelle: Design-System-Artefakt «abulab» (claude.ai). Später: abutools/gestaltung/tokens.json → build.sh → dist/tokens.css
   Nicht von Hand erweitern. Neue Werte zuerst im Design System beschliessen. */

@font-face { font-family: "IBM Plex Sans"; src: url("fonts/IBMPlexSans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/IBMPlexSans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/IBMPlexSans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: light dark;
  /* Thema hell (Standard) */
  --grund: #f4f3ef;        /* Seitengrund */
  --flaeche: #ffffff;      /* Karten, Felder */
  --hinterlegt: #e9e7e0;   /* Chips, ruhige Flächen */
  --tinte: #141414;        /* Text */
  --tinte-leise: #5c5b56;  /* Sekundärtext, nie für Aufgabentext */
  --linie: #dcdad3;        /* Haarlinien, dekorativ */
  --linie-stark: #8a887f;  /* Rahmen von Feldern und Sekundärknöpfen (3:1) */
  --signal: #2a3bd4;       /* einzige Akzentfarbe: hier handelst du */
  --auf-signal: #ffffff;
  --signal-hell: #e7e9fb;  /* ausgewählter Zustand */
  --leuchtstift: #ffe94d;  /* Markierung hinter Begriffen, gelbe Fragefläche */
  --auf-leuchtstift: #141414;
  --zeit: #b84600;         /* alles Zeitliche: «bis Min», Termine, Prüfung. Orange, nicht Braun: hebt sich in der Helligkeit vom Blau ab */
  --richtig: #1b7a3c; --falsch: #c42f28; --achtung: #9a5600; /* Status, immer mit Wort */
  --auf-falsch: #ffffff;   /* Schrift auf dem roten Knopf (Löschen, Endgültig entfernen) */
  --loesung: #d40f1e;      /* nur Lehrperson: Rand rechts und Marke LEHRPERSON (wie Randstreifen im Dossier) */

  /* themenunabhängig */
  --flaeche-signal: #2a3bd4; --auf-flaeche-signal: #ffffff; /* blaue Pausenfläche */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --raum-1: 4px; --raum-2: 8px; --raum-3: 16px; --raum-4: 24px; --raum-5: 40px; --raum-6: 64px;
  --radius-klein: 4px; --radius-mittel: 10px; --radius-rund: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #121211; --flaeche: #1e1e1c; --hinterlegt: #2b2a27;
    --tinte: #f2f1ec; --tinte-leise: #a6a59e;
    --linie: #353430; --linie-stark: #75736b;
    --signal: #8d99ff; --auf-signal: #0d1033; --signal-hell: #252a5c;
    --leuchtstift: #ffe14a; --zeit: #ffad70;
    --richtig: #5fcf86; --falsch: #ff8076; --achtung: #f2a83f; --auf-falsch: #141414; --loesung: #ff6f66;
  }
}

/* Typografie Bildschirm (App-Rahmen) */
.titel-gross  { font: 600 34px/40px var(--font-sans); letter-spacing: -0.02em; }
.titel        { font: 600 26px/32px var(--font-sans); letter-spacing: -0.015em; }
.zwischentitel{ font: 600 20px/26px var(--font-sans); }
.lead         { font: 400 19px/28px var(--font-sans); color: var(--tinte-leise); }
.text         { font: 400 17px/26px var(--font-sans); }
.text-stark   { font: 600 17px/26px var(--font-sans); }   /* nur noch Seitentitel-nahe Einzelfälle; Listentitel sind 400, Verben 500 */
.text-mittel  { font: 500 17px/26px var(--font-sans); }   /* Verben, Wege, Knöpfe */
.klein        { font: 400 14px/20px var(--font-sans); color: var(--tinte-leise); }
.label        { font: 500 12px/16px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinte-leise); }