/* web/tokens.css — Design-Tokens nach dem Mionda-Brandbook (Studio Wildlight, 02.04.2026).
 *
 * Einzige Stelle mit Farbwerten der App (Ticket K6). style.css, JS-Inline-Styles und
 * Manifest beziehen sich auf diese Tokens; scripts/design-tokens.test.mjs prüft das
 * (keine Hex-/rgb()-Werte außerhalb dieser Datei, Kontrast ≥ 4.5:1 aller Text/Hintergrund-
 * Paare in Light und Dark, Manifest-/Meta-Farben = Tokens). Warum: context/kurs-scope.md
 * „Design nach dem Mionda-Brandbook". Kontrasttabelle: docs/KONTRAST_Design_Tokens.md.
 *
 * Markenfarben (Brandbook S. 22) sind wörtlich übernommen. Alles mit „abgeleitet" ist eine
 * eigene Ableitung für App-Zustände, die das Brandbook nicht vorgibt.
 */
:root {
  /* Markenfarben (Brandbook) */
  --brand-primary: #5C2D0B;   /* Primary Color, Terrakotta */
  --brand-sand: #E9E6DD;      /* Secondary Color */
  --brand-offwhite: #F8F8F5;  /* Secondary Color */
  --brand-blue: #DEE8EA;      /* Accent Color, Hellblau */
  --brand-text: #190B00;      /* Text Color */

  /* Semantische Tokens, Light */
  --bg: var(--brand-offwhite);
  --card: #FFFFFF;                 /* neutrales Weiß für Karten, hebt sich vom Off-White ab */
  --text: var(--brand-text);
  --muted: #6B5D50;                /* abgeleitet: Text-Ton aufgehellt, ≥ 4.5:1 auf bg/card/sand/blue */
  --border: #D8D0C4;               /* abgeleitet: Sand + 12 % Primär, nur dekorative Trennlinien */
  --border-input: #857464;         /* abgeleitet: Eingaberahmen/Antwortoptionen, ≥ 3:1 (WCAG 1.4.11) */
  --focus: var(--brand-primary);   /* Fokusrahmen (Engine-Regel outline: 3px solid var(--focus)) */
  --accent: var(--brand-primary);
  --on-accent: var(--brand-offwhite);
  --surface-accent: var(--brand-blue);   /* Tabellenköpfe: Hellblau als Gegengewicht */
  --highlight: var(--brand-blue);        /* „Einfach"/Hinweis-Buttons (früher Gold) */
  --on-highlight: var(--brand-text);
  --learning: #AE9685;             /* abgeleitet: Primär 50 % (Brandbook-Tonstufe), Balkensegment */
  --ok: #3E6B2F;                   /* abgeleitet: Olivgrün, erdig, bewusst kein Flaggen-Grün */
  --on-ok: var(--brand-offwhite);
  --err: #A3341F;                  /* abgeleitet: Ziegelrot, bewusst kein Flaggen-Rot */
  --on-err: var(--brand-offwhite);
  --shadow: 0 2px 12px rgba(25, 11, 0, .07);
  --radius: 16px;

  /* Schriften: Ersatzschriften, bis lizenzierte Dateien für GoodFood/Switzer vorliegen.
   * Nur lokal installierte Schriften, kein Webfont-CDN: die CSP (web/_headers) hat kein
   * font-src, es greift default-src 'self' — fremde Font-Hosts sind blockiert, selbst
   * gehostete Dateien unter web/ wären erlaubt. Außerdem Datenschutz (kein Abruf bei Dritten).
   * Der Markenname steht vorn, damit eine spätere selbst gehostete @font-face-Einbindung
   * ohne weitere Änderung greift. */
  --font-heading: "GoodFood", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-body: "Switzer", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tracking-caps: .11em;          /* Brandbook: Laufweite 110 für Zwischenüberschriften in Versalien */

  color-scheme: light dark;
}

/* Dark Mode aus der Palette abgeleitet: Brandbook-Textfarbe wird Hintergrund, Sand wird Text,
 * Primär für Akzente aufgehellt (gleicher Farbton, Helligkeit für ≥ 4.5:1 auf Dunkel). */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--brand-text);
    --card: #2A1403;                 /* abgeleitet: Text-Ton + 25 % Primär */
    --text: var(--brand-sand);
    --muted: #ADA393;                /* abgeleitet: Sand abgedunkelt */
    --border: #4B2508;               /* abgeleitet: Text-Ton + 75 % Primär */
    --border-input: #8A6A50;         /* abgeleitet: Primär-Farbton aufgehellt, ≥ 3:1 auf bg/card */
    --focus: var(--accent);
    --accent: #DDAB88;               /* abgeleitet: Primär-Farbton aufgehellt (L 74 %) */
    --on-accent: var(--brand-text);
    --surface-accent: #402D1F;       /* abgeleitet: Karte + 12 % Hellblau */
    --highlight: #3D4A4C;            /* abgeleitet: Hellblau abgedunkelt */
    --on-highlight: var(--brand-sand);
    --learning: #7B5B44;             /* abgeleitet: Akzent 50 % auf Dunkel */
    --ok: #9ABF88;
    --on-ok: var(--brand-text);
    --err: #E49581;
    --on-err: var(--brand-text);
    --shadow: 0 2px 12px rgba(0, 0, 0, .35);
  }
}