/* ────────────────────────────────────────────────────────────────
   Die Millimeterpapier-Palette als CSS-Variablen — die einzige
   Farbquelle des Webs (UI-Leitplanken 8: nie Literale in Bausteinen).
   Geladen von der Web-App und von jeder statischen Seite.

   Hell übernimmt die bisherigen Werte 1:1. Dunkel ist
   „Millimeterpapier bei Nacht“ — eigens entworfen, nicht invertiert:
   dunkles Blaugrau-Papier, hellere Tinte, aufgehellte Akzente für
   AA-Kontrast; die Farbsemantik (Tintenblau = gelernt/aktiv, Rot =
   fällig/Fehler, Bleistiftgrau = sekundär) gilt in beiden Fassungen.

   **Wertgleich zu DesignSystem/Palette.swift** — scripts/check-palette.mjs
   erzwingt das. Beide Dateien ändern sich im selben Commit.

   Das Web folgt dem **Systemwunsch** (`prefers-color-scheme`); anders
   als die App bietet es keinen Hell/Dunkel-Schalter. Grund sind die
   Merkbild-Vignetten: Sie werden als <img> geladen und kennen nur die
   Systemeinstellung, nicht die einer Seite. Ein Schalter könnte die
   Oberfläche umstellen, die Zeichnungen aber nicht — und eine Nacht-
   oberfläche mit taghellen Bildern wäre schlechter als kein Schalter.
   ──────────────────────────────────────────────────────────────── */

:root {
  --paper: #f7f9fa;
  --card: #ffffff;
  --ink: #16283b;
  --blue: #2b4c8c;
  --blue-soft: #e8eef8;
  --red: #c0392b;
  --red-soft: #fbeae7;
  /* Bleistiftgrau, nachgeschärft am 24.08.2026. Der alte Ton #7c8a97 erreichte
     gegen Papier nur 3,35:1 und riss damit WCAG 1.4.3 (4,5:1) — er trägt in
     App und Trainer aber sämtliche Sekundärlabels, meist in 11 bis 15 px.
     #63717d ist derselbe Farbton (209°) und dieselbe Sättigung (11 %), nur
     dunkler: der HELLSTE Ton dieser Familie, der 4,5:1 schafft (4,75:1 auf
     Papier, 5,01:1 auf Karte). Damit bleibt „sekundär" so leise wie möglich
     und trotzdem lesbar; zur Tinte hält er weiter 2,99:1 Abstand, die
     Rangfolge bleibt also sichtbar. scripts/check-contrast.mjs rechnet es
     nach. Die Nachtfassung war nie betroffen (6,72:1) und bleibt.

     Eine Folge ist bewusst in Kauf genommen: Zum Tintenblau der tragenden
     Laute (Bildwörter-Seite, Basiscode) rückt der Ton näher — 1,67:1 statt
     zuvor 2,36:1. Die Unterscheidung hing dort nie an der Helligkeit,
     sondern an der Strichstärke: Tragende Laute stehen halbfett, Füller
     mager. Genau darauf beruht die Nachtfassung seit jeher, wo beide Töne
     mit 1,08:1 praktisch gleich hell sind. WCAG 1.4.1 ist damit erfüllt —
     Farbe ist nicht das einzige Mittel. */
  --pencil: #63717d;
  --open-tick: #dce6ee;
  --line: rgba(22, 40, 59, 0.18);
  --grid-line: rgba(43, 76, 140, 0.05);
  --faint: #b4c0ca;
  /* Geistergrau — 1,49:1 und damit ausdrücklich KEINE Textfarbe. Es trägt
     genau eine Sache: die vier Punkte rechts der Einpräge-Vorlage, die
     andeuten, dass es weitergeht. Reine Zier ohne Aussage, deshalb auch aus
     dem Vorlesebaum genommen (aria-hidden im Web, accessibilityElement
     .ignore in der App) — und deshalb von WCAG 1.4.3 ausgenommen, das
     schmückenden Text nicht erfasst.
     Am 24.08.2026 geprüft und bewusst gelassen: Der Vorgänger links stand
     einmal ebenfalls hier, war aber Information und trägt seither
     Bleistiftgrau. Was hier bleibt, muss ohne Lesen auskommen. Wer Geistergrau
     je auf echten Text legt, hat den falschen Token gegriffen. */
  --ghost: #c6cfd8;
  --on-blue: #ffffff;
  --page-shadow: rgba(22, 40, 59, 0.22);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #10171e;
    --card: #171f27;
    --ink: #e8edf2;
    --blue: #7fa6e0;
    --blue-soft: #1c2a40;
    --red: #e0796c;
    --red-soft: #3a211d;
    --pencil: #8fa0b0;
    --open-tick: #2a3642;
    --line: rgba(232, 237, 242, 0.16);
    --grid-line: rgba(127, 166, 224, 0.07);
    --faint: #55636f;
    --ghost: #46545f;
    --on-blue: #0e1620;
    --page-shadow: rgba(0, 0, 0, 0.6);
  }
}