/*
 * Design-Tokens „Philipps Dekoschätze".
 *
 * Zweck: füllt den Token-Vertrag des Templates mit den Werten dieser Site.
 * Das Basis-CSS des Templates kennt nur generische Namen (--surface-1,
 * --accent, --f-display, …); die kundeneigenen Farbnamen leben ausschließlich
 * hier (CLAUDE.md 7.2).
 *
 * Zusammenspiel: Der Build bindet diese Datei über --theme ein. Wer hier einen
 * Wert ändert, ändert das Aussehen der ganzen Site – ohne eine Zeile Code.
 *
 * Quelle seit 05.10.2026: Viviens eigener Farbvorschlag („Dunkles Braun statt
 * Grün“) – Überschriften Walnussbraun #49372F, Fließtext Braun #594438, Akzent
 * Altrosa #D4A7A1, Hintergrund Cremeweiß #FAF8F4. Das Tannengrün des ersten
 * Entwurfs ist damit ganz weg; ihr war es „zu durcheinander“. Alles Weitere
 * ist aus diesen vier Farben abgeleitet. Begründung im Template: E-054.
 *
 * Signatur: der Rundbogen (--radius-signature), dazu Fotoabzüge
 * (stil.karten: abzug in site.config.json) und ihr Foto in weicher, schwebender
 * Form (Template E-055).
 */
:root {
  /* Nur zwei Flächen im Wechsel (site.surfaces: 2), beide warm und nah
     beieinander. Mit dreien sprang die Seite von Beige auf fast Weiß und
     zurück – „die Übergänge passen nicht“ (Chris, 05.10.2026). Die dritte
     steht nur, weil der Token-Vertrag sie verlangt; sie ist die erste. */
  --surface-1: #f8f3ec; /* Cremeweiß – Grundfläche */
  --surface-2: #f2e9de; /* einen Hauch wärmer, für den Flächenwechsel */
  --surface-3: #f8f3ec;

  --text: #594438; /* Braun – Fließtext */
  --text-muted: #735d52;
  --heading: #49372f; /* Walnussbraun – Überschriften, Fußzeile */

  /* Der Hauptakzent bleibt dunkel: Er tönt im Kalender die freien Tage,
     Altrosa (--accent-2) die belegten. Wären beide Altrosa, sähen frei und
     belegt gleich aus. Die Knöpfe werden über eigene Tokens Altrosa. */
  --accent: #49372f;
  --accent-hover: #3a2b24;
  --on-accent: #faf8f4;

  --accent-2: #d4a7a1; /* Altrosa – alle Knöpfe */
  --accent-2-hover: #c6958e;
  /* Weiß wie in Viviens Entwurf. Der Kontrast-Hinweis im Build dazu ist
     bekannt (E-054); lesbarer wäre --heading. */
  --on-accent-2: #ffffff;

  --detail: #985f56; /* dunkles Altrosa – kleine Zeilen; heller wäre auf Creme nicht lesbar */
  --border: #e9ddd2;

  --f-display: 'Libre Baskerville', Georgia, serif;
  --f-body: 'Karla', system-ui, sans-serif;
  --fs-base: 17px;
  --lh-body: 1.65;

  --radius-card: 18px;
  --radius-pill: 999px;
  --radius-signature: 999px 999px 0 0; /* Rundbogen */

  --maxw: 1100px;
  --gutter: 24px;
  /* Logo mit Namen, sechs Menüpunkte und zwei Kontaktwege brauchen rund
     1150 px. Mit der Kopfzeile in Inhaltsbreite (1100 px) wäre das Menü auch
     am großen Schirm eingeklappt. So steht es ab etwa 1200 px offen –
     Laptop, iPad quer –, darunter (iPad hochkant) hinter ☰ (Template E-056). */
  --header-maxw: 1320px;

  --focus: #49372f;

  /* ---- Optionale Tokens (Vorgaben im Template, tokens.contract.css) ---- */

  /* Alle Knöpfe in Altrosa – oben im Hero wie unten bei den Anfragen. */
  --btn-border: var(--accent-2);
  --btn-solid-bg: var(--accent-2);
  --btn-solid-color: var(--on-accent-2);
  --btn-solid-hover-bg: var(--accent-2-hover);
  --btn-quiet-bg: var(--accent-2);
  --btn-quiet-color: var(--on-accent-2);
  --btn-quiet-hover-bg: var(--accent-2-hover);
  /* Auch auf dem Foto im Hero ohne hellen Rand – sonst sieht der zweite
     Knopf anders aus als der erste. */
  --btn-quiet-foto-border: var(--accent-2);

  /* Karten und Abzüge in warmem Creme, deutlich dunkler als beide Flächen
     (Viviens Wunsch) – und auf beiden dieselbe Farbe, damit sie überall
     gleich aussehen. */
  --card-bg: #ebdcc8;
  --card-bg-alt: #ebdcc8;

  /* Die kleine Zeile über Überschriften als Schreibschrift. Eine
     Schreibschrift braucht mehr Größe als eine kursive Zeile, um lesbar zu
     bleiben. */
  --eyebrow-font: 'Allura', cursive;
  --eyebrow-style: normal;
  --eyebrow-weight: 400;
  --eyebrow-size: 1.9rem;
  --eyebrow-color: var(--detail);

  /* Ihr Foto: kein strenges Oval, sondern eine weiche, leicht unregelmäßige
     Form, die langsam zwischen drei Rundungen wechselt und dabei ein paar
     Pixel schwebt (Viviens Wunsch vom 05.10.2026). Bei „weniger Bewegung“
     bleibt sie still in der ersten Form. Feiner Altrosa-Rand. */
  --radius-about: 58% 42% 52% 48% / 46% 54% 46% 54%;
  --radius-about-2: 46% 54% 44% 56% / 55% 45% 58% 42%;
  --radius-about-3: 54% 46% 58% 42% / 50% 58% 42% 50%;
  --about-motion: about-schweben 14s ease-in-out infinite;
  --signature-border: 1px solid var(--accent-2);
}