/*
 * Token-Vertrag: die Liste aller Design-Tokens, die ein Theme definieren MUSS.
 *
 * Zweck: Das Basis-CSS (`styles/base.css`) arbeitet ausschließlich mit diesen
 * Namen. Ein Kundenrepo liefert seine `tokens.css` und füllt genau diese Werte –
 * nicht mehr, nicht weniger. Dadurch bleibt das Basis-CSS frei von
 * kundenspezifischen Farben und Schriften (Genericity-Regel, CLAUDE.md 2).
 *
 * Zusammenspiel: `tests/unit/tokens.test.js` liest diese Datei und prüft, dass
 * jedes Theme unter `examples/themes/` und im Kundenrepo alle Tokens setzt.
 * Fehlt eines, schlägt der Build/Test fehl statt still auf Schwarz zu fallen.
 *
 * Die Werte hier sind absichtlich neutrale Graustufen: sie sind nie Teil eines
 * Kundendesigns, sondern nur die Notbremse, falls ein Theme nicht geladen wird.
 *
 * Unten folgt ein zweiter Block mit **optionalen** Tokens. Ihre Vorgaben sind
 * das bisherige Aussehen des Baukastens; ein Theme darf sie überschreiben,
 * muss aber nicht. So bekommt ein neues Gestaltungsmittel kein Kundenrepo
 * kaputt, dessen `tokens.css` es noch nicht kennt (Story 10.6a).
 */
:root {
  /* --- Flächen. Sections wechseln automatisch zwischen diesen drei. --- */
  --surface-1: #ffffff;
  --surface-2: #f4f4f4;
  --surface-3: #e9e9e9;

  /* --- Text --- */
  --text: #222222;
  --text-muted: #6b6b6b;
  --heading: #111111;

  /* --- Hauptakzent: Buttons, aktive Zustände --- */
  --accent: #333333;
  --accent-hover: #111111;
  --on-accent: #ffffff;

  /* --- Zweitakzent: hervorgehobene Aktion, sparsam einsetzen --- */
  --accent-2: #777777;
  --accent-2-hover: #555555;
  --on-accent-2: #ffffff;

  /* --- Feine Details: Linien, Rahmen, Eyebrow-Zeilen --- */
  --detail: #999999;
  --border: #d8d8d8;

  /* --- Typografie: stärkster Individualisierungshebel (CLAUDE.md 7.2) --- */
  --f-display: Georgia, serif;
  --f-body: system-ui, sans-serif;
  --fs-base: 17px;
  --lh-body: 1.65;

  /* --- Formen. --radius-signature trägt das Signature-Element des Kunden. --- */
  --radius-card: 12px;
  --radius-pill: 999px;
  --radius-signature: 12px;

  /* --- Layout --- */
  --maxw: 1100px;
  --gutter: 24px;

  /* --- Fokusring: muss auf allen Flächen sichtbar sein (Barrierefreiheit) --- */
  --focus: #0055cc;
}

/* @optional – ab hier setzt ein Theme nur, was es anders haben will. */
:root {
  /* --- Überschriften --- */
  --heading-weight: 400;

  /* Abschnittsköpfe: links oder mittig. Zum Zentrieren beide setzen:
     --head-align: center; --head-margin: auto; */
  --head-align: left;
  --head-margin: 0;

  /* Die kleine Zeile über einer Überschrift („Eyebrow"). Vorgabe: kursiv in
     der Display-Schrift. --eyebrow-line > 0 setzt einen Strich davor. */
  --eyebrow-font: var(--f-display);
  --eyebrow-style: italic;
  --eyebrow-weight: 300;
  --eyebrow-size: 1.15rem;
  --eyebrow-transform: none;
  --eyebrow-tracking: normal;
  --eyebrow-color: var(--detail);
  --eyebrow-line: 0px;

  /* --- Menü in der Kopfzeile. Passt die Zeile nicht, klappt das Menü ein
     (E-056); eine breitere Kopfzeile hält es auf großen Schirmen offen. --- */
  --header-maxw: var(--maxw);
  --nav-size: 0.92rem;
  --nav-transform: none;
  --nav-tracking: normal;
  --nav-color: var(--text);

  /* --- Schaltflächen. Die „stille" ist vorgabemäßig nur umrandet. Die
     gefüllte trägt den Hauptakzent; wer alle Knöpfe in einer anderen Farbe
     will, setzt sie hier, ohne den Akzent selbst zu ändern – der färbt auch
     Kalender und Hervorhebungen (E-054). --- */
  --btn-radius: var(--radius-pill);
  --btn-border: var(--accent);
  --btn-solid-bg: var(--accent);
  --btn-solid-color: var(--on-accent);
  --btn-solid-hover-bg: var(--accent-hover);
  --btn-quiet-bg: transparent;
  --btn-quiet-color: var(--accent);
  --btn-quiet-hover-bg: color-mix(in srgb, var(--accent) 8%, transparent);
  /* Die stille Schaltfläche auf einem Foto (Hero-Slider): heller Rand. */
  --btn-quiet-foto-border: var(--on-accent);
  --btn-quiet-foto-color: var(--on-accent);

  /* --- Signature-Element im Hero. Die Bewegung wechselt zwischen drei
     Formen; ohne eigene Werte bleibt die Form, wie sie ist. Beispiel:
     --signature-motion: signatur-schweben 10s ease-in-out infinite; --- */
  --radius-signature-2: var(--radius-signature);
  --radius-signature-3: var(--radius-signature);
  --signature-motion: none;
  --signature-border: 1px solid var(--border);
  --signature-shadow: none;
  --hero-frame-max: 380px;

  /* --- Karten und Fotoabzüge. Vorgabe: die zweite Fläche, auf ihr selbst
     die erste (sonst verschwände die Karte). Wer eine eigene Kartenfarbe
     will, setzt beide – meist auf denselben Wert. --- */
  --card-bg: var(--surface-2);
  --card-bg-alt: var(--surface-1);

  /* --- Über mich: Form und Größe des Fotos. Schweben wie im Hero, mit
     eigenen Formen: --about-motion: about-schweben 12s ease-in-out infinite; --- */
  --radius-about: var(--radius-signature);
  --radius-about-2: var(--radius-about);
  --radius-about-3: var(--radius-about);
  --about-motion: none;
  --about-frame-max: 300px;

  /* --- Zitat: mit Linie davor, wenn gesetzt --- */
  --quote-border: none;
  --quote-indent: 0;

  /* --- Fußzeile --- */
  --footer-bg: var(--heading);
  --footer-text: var(--on-accent);
  --footer-link: var(--on-accent);
  --footer-logo-note: var(--accent-2);
  --footer-border: none;

  /* --- Stilprofil „form" (E-053, styles/stil-form.css). Wirken nur, wenn
     die Site in site.config.json `stil.form` auf weich oder organisch setzt. --- */
  --form-radius-weich: 22px;
  --ecke-klein: 3px;
  --ecke-gross: 48px;
  --rahmen-farbe: var(--accent-2);
  --rahmen-neigung: 3deg;
  --raster-versatz: 48px;

  /* --- Stilprofil „flaeche" (E-053, styles/stil-flaeche.css). Wirken nur
     bei `stil.flaeche` papier oder glas. Deckkraft in Prozent: je kleiner,
     desto mehr scheint durch. --- */
  --papier-raster: 7px;
  --papier-punkt: 4.5%;
  --glas-deckkraft: 78%;
  --glas-unschaerfe: 20px;

  /* --- Stilprofil „etiketten" (E-053, styles/stil-etiketten.css). Wirken
     nur bei `stil.etiketten: archiv`. Die Etikettenschrift ist eine
     Systemschrift – keine Datei, kein Aufruf nach außen. --- */
  --f-label: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --etikett-groesse: 0.78rem;
  --etikett-sperrung: 0.08em;
  --etikett-linie: 24px;

  /* --- Stilprofil „bewegung" (E-053, styles/stil-bewegung.css). --- */
  --bewegung-dauer: 0.75s;
  --bewegung-kurve: cubic-bezier(0.25, 1, 0.5, 1);

  /* --- Fotoband (Section `fotoband`, E-053) --- */
  --fotoband-hoehe: 204px;
  --fotoband-breite: 238px;
  --fotoband-dauer: 62s;

  /* --- Papierkörnung über der ganzen Seite. Vorgabe: keine.
     Zum Einschalten: --grain-image: url('/styles/koernung.svg'); --- */
  --grain-image: none;
  --grain-opacity: 0;

  /* --- Ornamente: eine Zeichnung je Abschnitt (E-057). Welche, steht in
     site.config.json an der Section ("ornament": "<name>"). Hier nur die
     Größe – gemessen an der Höhe, damit breite und schmale Zeichnungen
     gleich groß wirken – und der Abstand zum Rand. Die Linie gehört zum
     Trenner, als der die Zeichnung auf Tablet und Laptop erscheint. --- */
  --ornament-hoehe: 180px;
  --ornament-abstand: 2%;
  --ornament-linie: color-mix(in srgb, var(--accent) 30%, transparent);
}