/* ===== Einladung - Design-Tokens ======================================
   1:1 aus SoulKeeper/css/variables.css übernommen (identische Variablen-
   namen), damit css/level1.css, css/level2.css und css/level3.css
   nahezu unverändert aus SoulKeeper übernommen werden können. Eigene
   Datei (kein Import aus SoulKeeper), damit dieses Projekt unabhängig
   bleibt. */

:root {
    /* Basis, themenunabhängig */
    --sky-black: #05050a;
    --star-color: #f2ece2;
    --text: #e8e2f0;
    --text-dim: #9a92ab;
    --panel-bg: rgba(10, 8, 16, 0.55);
    --panel-border: rgba(255, 255, 255, 0.12);

    /* Übergangsdauer für den weichen Theme-Wechsel */
    --theme-transition: 1.1s ease;

    /* Theme-Akzentfarbe - wird von [data-theme] unten überschrieben. */
    --accent: #7a4fd6;
    --accent-bright: #a97bff;

    /* Level 2 - bewusst themeunabhängig (siehe SoulKeeper/css/variables.css). */
    --level2-hoehle-bg: #000000;

    /* Wie weit die Oberwelt-Szene "verkürzt" wird (siehe css/level1.css:
       #scene-level1, negativer margin-bottom). Boden01.svg/Gräber/Bäume
       sitzen dort bei bottom:16% - die unteren 16vh der Szene sind
       dadurch GARANTIERT leer (nur Hintergrundverlauf, kein Bild), egal
       bei welcher Fensterbreite. Die nachfolgende Unterwelt-Szene holt
       diesen leeren Streifen per negativem Margin auf, ohne dass Boden/
       Gräber/Hände selbst verschoben werden müssen.
       WICHTIG: muss >= 16vh sein (die tatsächliche leere Zone), sonst
       bleibt ein Rest-Spalt stehen, in dem die graue Fläche der hinteren
       Ebene (.level1-hinten-untergrund) durchscheint - exakt das war der
       frühere Wert von 15vh: als "Sicherheitsmarge gegen
       Rundungsdifferenzen" gedacht, aber KLEINER als die 16vh-Zone und
       damit selbst die Ursache eines dauerhaften, auflösungsunabhängigen
       1vh-Spalts an der Naht Oberwelt->Unterwelt. 17vh statt 16vh, damit
       die Unterwelt bewusst 1vh in die (ohnehin leere) Bodenzone
       hineingreift statt nur exakt bündig zu sein - das ist die
       tatsächliche Sicherheitsmarge gegen Rundungsdifferenzen.
       Wird an zwei synchron zu haltenden Stellen gebraucht: hier
       (css/level1.css: #scene-level1) und an der Gesamthöhe von
       #welt-track (css/welt.css). */
    --oberwelt-kuerzung: calc(17 * var(--uh));
}

/* ----- Theme: Purple ----- */
[data-theme="purple"] {
    --accent: #7a4fd6;
    --accent-bright: #a97bff;
    --horizon-color: #3a1a5c;
    --level1-grau: #171126;
    --level2-ebene4-color: #0D0714;
    --level2-ebene2-color: #170B26;
    --level2-glow-color: #7B3FA0;
    --level2-pilz-color: #B86BDB;
    --level2-pilz-glow-color: #713F91;

    /* Nebel der Oberwelt-Verfluchung (siehe css/verfluchung.css) - Lila
       + Schwarz. */
    --nebel-dunkel: #150a24;
    --nebel-mittel: #4c1a7a;
    --nebel-hell: #8b3fe8;
}

/* ----- Theme: Orange (Standard) -----
   Orange ist die Grundeinstellung der Website: der :root-Fallback greift auf
   jeder Seite ohne (oder mit unbekanntem) data-theme und deckt sich mit dem
   Startwert data-theme="orange" im Markup und STANDARD_THEME in
   sh/js/theme.js. Frueher stand hier Purple. */
:root,
[data-theme="orange"] {
    --accent: #c9500f;
    --accent-bright: #ff8a3d;
    --horizon-color: #6b2a0a;
    --level1-grau: #2A1A12;
    --level2-ebene4-color: #120804;
    --level2-ebene2-color: #241207;
    --level2-glow-color: #C85A18;
    --level2-pilz-color: #D98232;
    --level2-pilz-glow-color: #A85520;

    /* Nebel der Oberwelt-Verfluchung (siehe css/verfluchung.css) - Orange
       + Schwarz. */
    --nebel-dunkel: #1f0f04;
    --nebel-mittel: #7a3308;
    --nebel-hell: #ff8a2e;
}

/* ----- Theme: Grey ----- */
[data-theme="grey"] {
    --accent: #6b7280;
    --accent-bright: #a8b0bd;
    --horizon-color: #4a4e58;
    --level1-grau: #18202B;
    --level2-ebene4-color: #10161A;
    --level2-ebene2-color: #1B252C;
    --level2-glow-color: #B8D8E8;
    --level2-pilz-color: #B8D6D9;
    --level2-pilz-glow-color: #7FA6B3;

    /* Nebel der Oberwelt-Verfluchung (siehe css/verfluchung.css) - Schwarz,
       Grau, Weiß. */
    --nebel-dunkel: #0a0a0c;
    --nebel-mittel: #5a5f66;
    --nebel-hell: #e8ecef;
}

/* ----- Theme: White ----- */
[data-theme="white"] {
    --accent: #d0d0d8;
    --accent-bright: #ffffff;
    --horizon-color: #45454c;
    /* Felswände/hintere Ebene bewusst NICHT weiß, sondern gräulich
       (Vorgabe TODO-20260901-006) - dieselben Werte wie Theme Grey. */
    --level1-grau: #18202B;
    --level2-ebene4-color: #10161A;
    --level2-ebene2-color: #1B252C;
    --level2-glow-color: #E5E5EA;
    --level2-pilz-color: #D8D8DE;
    --level2-pilz-glow-color: #A0A0A8;

    /* Nebel der Oberwelt-Verfluchung (siehe css/verfluchung.css) - reines
       Grau/Weiß, keine Farbe. */
    --nebel-dunkel: #0c0c0e;
    --nebel-mittel: #6e6e76;
    --nebel-hell: #ffffff;
}

/* ===== Umgebungssteuerung (MAIN/DEV) =====
   data-umgebung wird ganz am Anfang von index.php per Inline-Skript auf
   <html> gesetzt (Pfaderkennung /main/ vs. /dev0/, siehe dortiger
   Kommentar, wie SoulKeeper/index.html). Elemente mit .dev-only (aktuell:
   der Theme-Umschalter oben rechts, siehe index.php) bleiben nur in DEV
   sichtbar - reine Sichtbarkeitssteuerung, das jeweilige Element behält
   seine eigentliche display-Regel unverändert, sobald data-umgebung="dev"
   ist. */
:root:not([data-umgebung="dev"]) .dev-only {
    display: none;
}