/* tokens.css — alle Design-Werte an einer Stelle
 * Fassung für Klaus-G. Broscheit · basiert auf der neutralen Fassung v0.6 · Stand 2026-10-20
 *
 * Diese Datei enthält NUR Werte. Alle weiteren Styles kommen in eine eigene Datei daneben.
 * Steht ein Farbwert irgendwo sonst im Projekt, ist das der Fehler.
 *
 * Herkunft der Werte und alle Kontrastmessungen: design.md, Teil B (B3 Übernahme-Tabelle).
 * Farbwelt aus Klaus' eigenem Material: Navy aus den Infografiken, warmes Orange als
 * Hervorhebungsfarbe, Creme/Beige aus dem Portrait (Pullover) und der Forderung
 * „nicht technisch kalt".
 */

:root {
  color-scheme: light;

  /* Aktion — die eine Farbe für Buttons, Links und Aktives.
     Gebranntes Orange: warm, einladend, klar abgesetzt vom Navy.
     Weiß darauf 5,82:1 · als Linktext auf Seite 5,49:1, auf Karte 5,04:1 */
  --action:       #AD4410;
  --action-hover: #8F3A0D;   /* Weiß darauf 7,56:1 */
  --action-press: #7A310B;   /* Weiß darauf 9,24:1 */
  --on-action:    #FFFFFF;

  /* Getönte Aktionsfläche — gewählter Filter-Chip, Textmarker hinter einem Wort.
     Darauf IMMER Navy-Text (11,48:1), nie orangefarbener Text (4,28:1 – zu wenig). */
  --action-tint:       #FBE3CF;
  --action-tint-hover: #F7D3B5;   /* Navy darauf 10,09:1 */

  /* Hintergrund-Treppe: Seite → Karte → Feld → Hover-Fläche → gedrückt
     Warm statt grau. Abstufungen sichtbar, aber ruhig. */
  --bg-0: #FBF8F3;   /* Seite — warmes Creme */
  --bg-1: #F4EEE5;   /* Abschnitt / Karte — Beige */
  --bg-2: #FFFFFF;   /* Feld, hervorgehobene Karte */
  --bg-3: #EDE5D8;   /* Hover-Fläche */
  --bg-4: #E3D8C6;   /* gedrückt / stark abgesetzt */

  /* Text-Treppe in Navy statt Schwarz. Information nie in --text-500.
     Messwerte gegen --bg-0 / --bg-1 / --bg-2 / --bg-3: */
  --text-100: #172A4F;                  /* 13,39 / 12,30 / 14,18 / 11,35 */
  --text-200: rgba(23, 42, 79, .88);    /*  9,36 /  8,72 /  9,76 /  8,28 */
  --text-300: rgba(23, 42, 79, .76);    /*  6,43 /  6,10 /  6,62 /  5,82 */
  --text-400: rgba(23, 42, 79, .70);    /*  5,31 /  5,09 /  5,44 /  4,91 */
  --text-500: rgba(23, 42, 79, .48);    /*  2,84 — nur Platzhalter und Dekor */

  /* Rahmen */
  --border-soft:   rgba(23, 42, 79, .14);   /* Trennlinien, dekorativ */
  --border-strong: rgba(23, 42, 79, .58);   /* Feldrahmen: 3,70 auf Seite, 3,81 auf Weiß */
  --border-focus:  var(--action);           /* 5,49:1 auf Seite */

  /* Markenfläche — Navy-Bänder (Fußzeile, Kopf des Assistenten-Fensters).
     Auf dieser Fläche keine Primär-Buttons: Orange hat dort nur 2,44:1. */
  --surface-brand:          #172A4F;
  --on-surface-brand:       #FBF8F3;                   /* 13,39:1 */
  --on-surface-brand-muted: rgba(251, 248, 243, .78);  /*  8,73:1 */
  --link-on-brand:          #F2994A;                   /*  6,37:1 */

  /* Status — funktional, keine Markenfarben; nie ohne Symbol oder Text daneben.
     Fehler bewusst Karmin statt Orange-Rot, damit er nicht mit der Aktionsfarbe verwechselt wird. */
  --ok:    #1F7A4D;   /* 5,02 Seite · 4,61 Karte */
  --warn:  #8A5A00;   /* 5,59 Seite · 5,14 Karte */
  --error: #B0173A;   /* 6,54 Seite · 6,01 Karte */
  --ok-tint:    #E3F1E8;   /* --ok darauf 4,56:1 */
  --warn-tint:  #FBF0D9;   /* --warn darauf 5,24:1 */
  --error-tint: #FBE4E8;   /* --error darauf 5,73:1 */

  /* Schrift — beide Familien liegen als Dateien im Projekt (assets/fonts), nie aus dem Netz.
     Fließtext: Atkinson Hyperlegible (Braille Institute, SIL OFL 1.1) — für gute Lesbarkeit
       auch bei eingeschränktem Sehvermögen entwickelt.
     Überschriften (Vorschlag): Source Serif 4, Semibold (Adobe, SIL OFL 1.1) — warm, erfahren.
     Fehlen die Dateien, greifen die System-Schriften dahinter. */
  --font:       "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-brand: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono:       ui-monospace, "SF Mono", Consolas, monospace;
  --fw-regular: 400;
  --fw-bold:    700;
  --fw-heading: 600;

  /* Schriftgrößen — eine Stufe größer als die neutrale Fassung (Zielgruppe 60+,
     Klaus' Vorgabe „große und gut lesbare Schrift"). Abweichung dokumentiert in design.md B6. */
  --fs-xs:  14px;   /* nur Fußnoten, Rechtliches */
  --fs-sm:  16px;   /* Hilfstexte, Badges */
  --fs-md:  18px;   /* Fließtext */
  --fs-lg:  22px;   /* Zwischenüberschrift, Lead-Text */
  --fs-xl:  28px;   /* H2 */
  --fs-2xl: 36px;   /* H1 auf Unterseiten */
  --fs-3xl: 48px;   /* H1 der Startseite — eine Stelle pro Seite */

  --lh-text:    1.6;
  --lh-heading: 1.15;

  /* Abstände */
  --space-xs: 4px;  --space-sm: 8px;   --space-md: 16px;
  --space-lg: 24px; --space-xl: 40px;  --space-2xl: 64px;  --space-3xl: 96px;

  /* Rundungen — „freundlich" → eher rund */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 20px;  --r-pill: 999px;

  --shadow:    0 8px 24px rgba(23, 42, 79, .08);
  --shadow-lg: 0 16px 40px rgba(23, 42, 79, .12);   /* nur das Assistenten-Fenster */
  --t-fast: .15s;  --t: .25s;  --ease: cubic-bezier(.4, 0, .2, 1);

  --tap:       48px;    /* Mindestgröße für Klickziele — über dem Pflichtwert 44 px */
  --container: 1120px;  /* Maximalbreite der Seite */
  --reading:   66ch;    /* Maximalbreite von Fließtext */
}

/* Kein dunkler Modus — bewusst entschieden (siehe design.md B6). */

/* 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;
  }
}