/* ==========================================================================
   Psymora — Gestaltungsvariablen (Marke)
   ==========================================================================

   DIE QUELLE IST `website/css/style.css`. Diese Datei ist eine Kopie ihres
   `:root`-Blocks, Zeichen für Zeichen — nicht eine zweite, eigene Fassung.

   Warum überhaupt eine Kopie und nicht ein gemeinsames Stylesheet?
   ----------------------------------------------------------------
   Website und Lizenzserver sind zwei getrennte Auslieferungen auf zwei
   getrennten Hosts: `website/` geht per FTPS zu All-Inkl nach psymora.at
   (.github/workflows/deploy-website.yml holt dafür ausdrücklich NUR den
   Ordner `website/` aus dem Repo), der Lizenzserver geht per rsync auf
   seinen eigenen Webspace hinter signup.psymora.at. Keine der beiden
   Auslieferungen kann eine Datei der anderen lesen. Bliebe nur der
   Querverweis `https://psymora.at/css/style.css` — und der wäre genau das,
   was `css/fonts.css` im Kopf verbietet: ein Aufruf zu einem fremden Host
   bei jedem Seitenaufruf, mit der IP-Adresse jeder Bestellerin im Gepäck.
   Nur dass der Host hier zufällig uns gehört, ändert daran für den Browser
   nichts, und CORS käme bei den Schriften obendrauf.

   Wie bleibt trotzdem EINE Stelle die Wahrheit?
   --------------------------------------------
   Indem das Abschreiben geprüft wird statt geglaubt:
   `tests/Feature/GestaltungSynchronTest.php` vergleicht diesen Block mit dem
   `:root`-Block der Website, dazu `css/fonts.css` und die Schriftdateien
   Byte für Byte. Weicht etwas ab, wird die Testsuite rot und nennt den
   Befehl zum Nachziehen. Eine Farbe ändert man also weiterhin an genau
   einer Stelle — in `website/css/style.css` —, und die CI sorgt dafür, dass
   die Kopie hier nicht zurückbleibt.

   NICHTS HIER VON HAND ÄNDERN. Was unter dieser Zeile steht, ist Kopie;
   eigene Gestaltung der Bestellstrecke gehört in `css/bestellstrecke.css`.
   ========================================================================== */

:root {
  --bordeaux: #7d3c54;
  --bordeaux-dark: #5f2d40;
  --bordeaux-soft: #f3e9ed;
  --gold: #e3a857;
  --gold-soft: #fbf1de;
  --ink: #2a2228;
  --muted: #6b6169;
  --line: #ece7ea;
  --bg: #ffffff;
  --bg-warm: #faf7f5;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(42, 34, 40, .04), 0 8px 30px rgba(42, 34, 40, .06);
  --shadow-lg: 0 20px 60px rgba(125, 60, 84, .16);
  --maxw: 1120px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display: "Bricolage Grotesque", var(--font);

  /* --- Schriftfarben für die farbigen Flächen ---------------------------
     Gold (#e3a857) und das bisherige Braun (#9a6b1e) sind als SCHRIFT auf
     dem hellen Gold (--gold-soft) zu schwach: gemessen 1,87 bzw. 4,17 zu 1,
     gefordert sind 4,5. Dasselbe beim Grün (#2f7d51) auf seinem hellen
     Grund (#e7f3ec): 4,42. Die Flächen bleiben unverändert — nur die
     Schrift wird so weit nachgedunkelt, bis sie lesbar ist:
       --gold-ink  auf --gold-soft  5,12 · auf Weiß 5,74
       --green-ink auf --green-soft 5,69 · auf Weiß 6,49
     Das Gold selbst bleibt Schmuckfarbe (Haken, Ränder, Footer-Links auf
     dunklem Grund — dort trägt es mit 7,37 zu 1). -------------------- */
  --gold-ink: #8a5d14;
  --green-ink: #286a45;
  --green-soft: #e7f3ec;

  /* Vertikaler Rhythmus: eine Stufenleiter statt einzelner Zahlen.
     Der Abstand wächst mit der Fensterbreite mit, statt bei 720px zu
     springen — dadurch steht am Handy nichts unnötig weit auseinander. */
  --space-section: clamp(52px, 7vw, 84px);
  --space-head: clamp(32px, 4.4vw, 52px);
  --space-card: clamp(20px, 2.4vw, 26px);

  /* Lesebreite für Fließtext. 62 Zeichen liegt in dem Bereich, in dem das
     Auge die nächste Zeile ohne Suchen findet. */
  --measure: 62ch;

  --focus: var(--bordeaux);
  --focus-on-dark: #ffd79a;
}