/* Schriften: liegen im Projekt, siehe schriften.css — kein Netzzugriff zur Laufzeit */

/* tokens.css — alle Design-Werte an einer Stelle
 * Neutrale Fassung · v0.6 · Stand 2026-09-08
 *
 * 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. */
  --action: #BD8B3D;
  --action-hover: #946D27;
  --on-action: #171512;   /* Text auf der Aktionsfarbe — 6,01:1 */
  --action-line: #946D27; /* Rahmen um gefuellte Buttons — Gold selbst erreicht nur 2,74:1 gegen bg-0, dieser Ton 4,24:1 */

  /* Hintergrund-Treppe: Seite → Karte → Feld → Hover-Fläche */
  --bg-0: #F7F3EC;
  --bg-1: #FFFDF9;
  --bg-2: #EEE6DA;
  --bg-3: #F3E9D6;
  --bg-4: #E9DFC9;

  /* Text-Treppe: kräftig → leise. Information nie in --text-500 (nur zum Zurücknehmen). */
  --text-100: #171512;
  --text-200: rgba(23,21,18,.88);
  --text-300: rgba(23,21,18,.72);
  --text-400: rgba(23,21,18,.62);
  --text-500: rgba(23,21,18,.42);

  /* Rahmen */
  --border-soft: rgba(23,21,18,.16);
  --border-strong: rgba(23,21,18,.32);
  --border-focus:  var(--action);

  /* Status — funktional, keine Markenfarben; nie ohne Symbol oder Text daneben */
  --ok:    #1E9E5A;
  --warn:  #B7791F;
  --error: #C2410C;

  /* Schrift — System-Schrift als Standard.
     --font-brand ist der Platzhalter für eine eigene Schrift; ihre Dateien liegen im Projekt. */
  --font:       'Manrope', system-ui, -apple-system, sans-serif;
  --font-brand: 'Cormorant Garamond', Georgia, serif;
  --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: 4px;  --r-md: 8px;  --r-lg: 14px;  --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;
  }
}