/* tokens.css — alle Design-Werte an einer Stelle
 * Neutrale Fassung · v0.6 · Stand 2026-09-08
 * Gefüllt für: Christian Harting, KI-Café am 2026-09-30 · Kontraste nachgerechnet am 2026-09-29
 * (Begründung aller Werte: design.md, „Der Look dieses Projekts")
 *
 * Schrift des Gastes: Open Sans (erkannt im Website-CSS: "Open Sans,Arial,sans-serif").
 * Die Dateien liegen im Ordner fonts/ neben dieser Datei — fonts/fonts.css VOR dieser Datei
 * einbinden. Nichts wird zur Laufzeit aus dem Netz geladen.
 *
 * Diese Datei wird ins Projekt kopiert und dort gefüllt (siehe design.md, Teil B).
 * Sie enthält NUR Werte. Alle weiteren Styles kommen in eine eigene Datei daneben.
 * Steht ein Farbwert irgendwo sonst im Projekt, ist das der Fehler.
 *
 * Die Werte unten sind Platzhalter: neutral, kontrastsicher, sofort benutzbar —
 * und dafür gemacht, ersetzt zu werden.
 */

:root {
  color-scheme: light;

  /* Aktion — die eine Farbe für Buttons und Aktives. Hier die Farbe des Auftraggebers eintragen.
     Hier: nur als Fläche auf bg-0 bis bg-2, nie als Textfarbe (auf Weiß 3,25:1). */
  --action: #009BC2;
  --action-hover: #33AFCE;   /* aufgehellt, weil die Schrift darauf dunkel ist: 7,28:1 */
  --on-action: #0B1220;   /* Text auf der Aktionsfarbe */

  /* Hintergrund-Treppe: Seite → Karte → Feld → Hover-Fläche */
  --bg-0: #FFFFFF;
  --bg-1: #F5F9FA;
  --bg-2: #FFFFFF;
  --bg-3: #E7F3F6;
  --bg-4: #D9EDF2;

  /* Text-Treppe: kräftig → leise. Information nur in 100–300; 400 und 500 liegen unter 4,5:1
     und dienen nur zum Zurücknehmen (Platzhalter, Erledigtes, Deko). */
  --text-100: #283264;
  --text-200: rgba(40,50,100,.82);
  --text-300: rgba(40,50,100,.72);   /* ≥ 4,5:1 auf allen Hintergrundstufen */
  --text-400: rgba(40,50,100,.50);
  --text-500: rgba(40,50,100,.34);

  /* Rahmen */
  --border-soft: rgba(40,50,100,.12);     /* nur Trennlinien */
  --border-strong: rgba(40,50,100,.55);   /* Feldrand: ≥ 3:1 */
  --border-focus:  #00748E;               /* dunkles Cyan: ≥ 3:1 auch auf getönten Flächen */

  /* Status — funktional, keine Markenfarben; nie ohne Symbol oder Text daneben.
     ok und warn abgedunkelt, damit sie auch als Text ≥ 4,5:1 erreichen (bg-0 bis bg-3). */
  --ok:    #187E48;
  --warn:  #966319;
  --error: #C2410C;

  /* Medaillen auf dem PDF-Deckblatt (Zielbild §5.4) — Grafik mit Beschriftung daneben,
     auf Weiß ≥ 3:1 (Gold 3,25 · Silber 3,25 · Bronze 5,62; gerechnet am 30.09.2026). */
  --medal-gold:   #B8860B;
  --medal-silber: #8A8F98;
  --medal-bronze: #A0522D;

  /* Schrift — System-Schrift als Standard.
     --font-brand ist der Platzhalter für eine eigene Schrift; ihre Dateien liegen im Projekt. */
  --font: 'Open Sans', Arial, sans-serif;
  --font-brand: var(--font);
  --mono:       ui-monospace, "SF Mono", Consolas, monospace;

  /* Skalen — nur diese Werte, keine Zwischenwerte */
  --fs-xs: 12px;  --fs-sm: 14px;  --fs-md: 16px;
  --fs-lg: 20px;  --fs-xl: 24px;  --fs-2xl: 32px;

  --space-xs: 4px;  --space-sm: 8px;   --space-md: 16px;
  --space-lg: 24px; --space-xl: 40px;  --space-2xl: 64px;

  --r-sm: 8px;  --r-md: 12px;  --r-lg: 20px;  --r-pill: 999px;

  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --t-fast: .15s;  --t: .25s;  --ease: cubic-bezier(.4, 0, .2, 1);

  --container: 1100px;   /* Maximalbreite der Seite */
  --reading:   70ch;     /* Maximalbreite von Fließtext */
}

/* Dunkler Modus — nur anlegen, wenn er gebraucht wird.
   Gleiche Variablennamen, gespiegelte Werte, Kontraste neu gerechnet.
   Pro Anwendung ist einer der beiden Modi der Standard.

[data-theme="dark"] {
  color-scheme: dark;
  --bg-0: …; --bg-1: …; --bg-2: …; --bg-3: …; --bg-4: …;
  --text-100: …; --text-200: …; --text-300: …; --text-400: …; --text-500: …;
  --border-soft: …; --border-strong: …;
}
*/

/* Reduzierte Bewegung respektieren — gilt in jeder Anwendung. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}