/* =========================================================================
   DIVINE — Design System (single source of truth)
   =========================================================================
   Extrahiert aus divine.php. divine.php gibt den Ton an: Werte hier sind
   1:1 von dort uebernommen, nichts wurde umgestaltet.

   Diese Datei enthaelt NUR das Fundament, das jede Seite teilt:
   Schriften, Farb-Tokens, Reset, Basis-Typografie, Seiten-Container.

   BEWUSST NICHT hier: der Seitenhintergrund. divine.php ist warm-offwhite
   (#F3F1EC), die Shop-Seiten sind grau (--bg-page). Das bleibt seitenspezifisch.

   Einbinden VOR jedem seitenspezifischen CSS, damit Seiten ueberschreiben
   koennen:
     <link rel="stylesheet" href="/brand.css?v=<?= filemtime(__DIR__.'/brand.css') ?>">
   ========================================================================= */


/* ---------- 1. SCHRIFTEN ------------------------------------------------
   Wurzel-absolute Pfade: gelten unabhaengig davon, aus welchem
   Verzeichnis eine Seite dieses Stylesheet einbindet.                     */

@font-face {
  font-family: "Stigsa Display";
  src: url("/StigsaDisplay-Regular.woff2") format("woff2"), url("/StigsaDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Stigsa Display";
  src: url("/StigsaDisplay-Medium.woff2") format("woff2"), url("/StigsaDisplay-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Stigsa Display";
  src: url("/StigsaDisplay-Bold.woff2") format("woff2"), url("/StigsaDisplay-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans Thin";
  src: url("/FiraSans-Thin.woff2") format("woff2"), url("/FiraSans-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans Light";
  src: url("/FiraSans-ExtraLight.woff2") format("woff2"), url("/FiraSans-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Portrait Script";
  src: url("/PortraitScript_Regular.woff2") format("woff2"), url("/PortraitScript_Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ---------- 2. FARB-TOKENS --------------------------------------------- */

:root {
  --bg-page: #d8d8d4;        /* outer grey margin */
  --bg-card: #f3f1ec;        /* warm off-white page background */
  --bg-card-2: #ecebe5;      /* slightly darker band */
  --ink: #1f1f1c;
  --ink-soft: #2b2b27;
  --hair: rgba(31, 31, 28, 0.55);
  --hair-soft: rgba(31, 31, 28, 0.18);
}


/* ---------- 3. RESET + BASIS-TYPOGRAFIE --------------------------------
   Ohne background — den setzt jede Seite selbst.                          */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

body {
  color: var(--ink);
  font-family: "Fira Sans Light", "Helvetica Neue", Arial, sans-serif;
  font-weight: 200;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* ---------- 4. SCHRIFT-HILFSKLASSEN ------------------------------------ */

.fontStigsaDisplay {
  font-family: "Stigsa Display", serif;
  font-weight: 500;
  letter-spacing: 0.18em;
}
body.script-font .fontPortraitScript,
body.script-font footer.site-footer h2 em { font-family: "Portrait Script", "Stigsa Display", serif; }
.fontPortraitScript {
  font-family: "Stigsa Display", serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  font-size: 2.4em;
  line-height: 1;
}


/* ---------- 5. SEITEN-CONTAINER ---------------------------------------- */

.page {
  max-width: 1280px;
  margin: 28px auto;
  background: var(--bg-card);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  position: relative;
}