/* Firmament-Tokens für den Pranayami-Funnel.
   Zwei Tinten (Indigo und Papier), Nacht als dunkles Thema, Amethyst als Licht, kein Gold.
   Werte aus Firmament/_quelle/firmament.mjs, gegengeprüft mit css/firmament-funnel.css und css/kabbalah.css (live). */

/* Google Sans Flex (OFL), selbst gehostet und auf die Zeichen dieser Seite gekürzt:
   Latin-1 + Satzzeichen, Achsen wght 280–680 und wdth 100–151, optische Größe fest auf 20 (53 KB statt 1,2 MB). */
@font-face {
  font-family: "Google Sans Flex";
  src: url("../fonts/google-sans-flex-pranayami.woff2") format("woff2");
  font-weight: 280 680;
  font-stretch: 100% 151%;
  font-display: swap;
}
/* Ersatzschrift mit passender Laufweite, solange Google Sans Flex lädt: Arial läuft fast gleich breit (gemessen 6352 zu 6298),
   die weite Schnittvariante (wdth 151) ist 1,56-mal so breit. So bricht der Text vor und nach dem Laden gleich um, kein Springen. */
@font-face { font-family: "GSF Ersatz"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); font-weight: 100 549; size-adjust: 99%; }
@font-face { font-family: "GSF Ersatz"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"); font-weight: 550 900; size-adjust: 99%; }
@font-face { font-family: "GSF Ersatz Versal"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"); size-adjust: 94%; }
@font-face { font-family: "GSF Ersatz Weit"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); size-adjust: 155%; }

:root {
  --papier: #F7F3EA;
  --papier-hell: #FBF9F4;
  --papier-2: #F0EBDF;
  --tinte: #211B43;
  --tinte-2: #4A4468;
  --tinte-3: #625D7C;
  --nacht: #100D24;
  --nacht-2: #17132F;
  --stich: #2B2453;
  --amethyst: #B3A1FF;
  --amethyst-tief: #5A45D4;
  --amethyst-hell: #E9E4FB;
  --cyan: #4CC9DD;

  /* Spektrum-Ausnahme: nur im Reviere-Element (Woche 2, Lichtspektrum), entsättigt */
  --sp-muladhara: #B0605D;
  --sp-svadhisthana: #BE7A4B;
  --sp-manipuraka: #A2A33C; /* bewusst kühl (Grün ≥ Rot), damit das Gelb nie wie Gold wirkt */
  --sp-anahata: #5F9068;
  --sp-vishuddhi: #4F7FA6;
  --sp-ajna: #5458A0;
  --sp-sahasrara: #8566B8;

  --schrift: "Google Sans Flex", "GSF Ersatz", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --schrift-weit: "Google Sans Flex", "GSF Ersatz Weit", ui-sans-serif, system-ui, sans-serif;
  --schrift-versal: "Google Sans Flex", "GSF Ersatz Versal", ui-sans-serif, system-ui, sans-serif;
  --spalte: 640px;
  --breit: 1120px;

  /* Dynamische Werte für fixierte Elemente (Kopfleiste, Kaufleiste) und die Dämmerung.
     Startwert = Nacht; js/thema.js schreibt sie beim Scrollen neu. */
  --t: 0;
  --d-grund: #100D24;
  --d-vg: #F7F3EA;
  --d-vg2: rgba(247, 243, 234, .8);
  --d-linie: rgba(247, 243, 234, .16);
  --d-akzent: #B3A1FF;
  --d-cta-bg: #F7F3EA;
  --d-cta-fg: #211B43;
  --d-cta-hover: #FFFFFF;
  --d-glas: rgba(16, 13, 36, .66);
}

/* Themen je Abschnitt. Die CTA-Fläche (--cta-bg) ist exklusiv: kein anderes Element ist damit gefüllt.
   Auf Nacht wie kabbalah.syncretism.live (Papier-Knopf), auf Tag wie syncretism.live (Tinte-Knopf). */
[data-thema="nacht"] {
  --grund: var(--nacht);
  --vg: var(--papier);
  --vg2: rgba(247, 243, 234, .8);
  --vg3: rgba(247, 243, 234, .66);
  --linie: rgba(247, 243, 234, .16);
  --akzent: var(--amethyst);
  --akzent-flaeche: rgba(179, 161, 255, .14);
  --karte: rgba(28, 24, 64, .72);
  --cta-bg: var(--papier);
  --cta-fg: var(--tinte);
  --cta-hover: #FFFFFF;
  color-scheme: dark;
}
[data-thema="tag"] {
  --grund: var(--papier);
  --vg: var(--tinte);
  --vg2: var(--tinte-2);
  --vg3: var(--tinte-3);
  --linie: rgba(33, 27, 67, .15);
  --akzent: var(--amethyst-tief);
  --akzent-flaeche: var(--amethyst-hell);
  --karte: var(--papier-hell);
  --cta-bg: var(--tinte);
  --cta-fg: var(--papier);
  --cta-hover: #2E2760;
  color-scheme: light;
}
/* Dämmerung: ohne Verlauf (kein JS / Bewegung reduziert) gilt Nacht, mit Verlauf die dynamischen Werte */
[data-thema="daemmerung"] {
  --grund: var(--nacht);
  --vg: var(--papier);
  --vg2: rgba(247, 243, 234, .8);
  --vg3: rgba(247, 243, 234, .66);
  --linie: rgba(247, 243, 234, .16);
  --akzent: var(--amethyst);
}
html.verlauf [data-thema="daemmerung"] {
  --vg: var(--d-vg);
  --vg2: var(--d-vg2);
  --vg3: var(--d-vg2);
  --linie: var(--d-linie);
  --akzent: var(--d-akzent);
}