/* ELEVATION · drei Rollen: --shadow-rest (ruhend) · --shadow-hover (angehoben) ·
   --shadow-overlay (schwebend) — Ersatz für den fehlenden Kartenrand. Tönung
   kommt aus tokens/colors.css (--sh, --sh-aN). Selektor MUSS
   `:root, [data-theme], [data-mode]` lauten: eine Custom Property löst ihre
   var()-Verweise beim Deklarationsort auf — nur `:root` würde --sh einfrieren,
   ein Theme-/Modus-Wechsel tiefer im Baum ([data-app]) bliebe wirkungslos. */

:root, [data-theme], [data-mode] {

  --shadow-rest:0 1px 2px rgba(var(--sh),var(--sh-a1)),0 4px 12px -2px rgba(var(--sh),var(--sh-a2));
  --shadow-hover:0 2px 4px rgba(var(--sh),var(--sh-a2)),0 14px 28px -6px rgba(var(--sh),var(--sh-a3));
  --shadow-overlay:0 4px 10px rgba(var(--sh),var(--sh-a3)),0 24px 48px -8px rgba(var(--sh),var(--sh-a4));

  /* ---- Haarlinien: Trennung INNERHALB einer Fläche ist ein Schatten, kein
         Rand (§1.5). `--linie-oben` sitzt über dem Element (Kartenfuß,
         Summenzeile, Fuß der Kontextleiste), `--linie-unten` darunter
         (Tabellenkopf, Reiterleiste). ---- */
  --linie-oben:0 -1px 0 var(--color-border-subtle);
  --linie-unten:0 1px 0 var(--color-border-subtle);

  /* ---- Wie weit die Zeilen-Trennlinie vor der Ecke endet ----
         Maßgeblich ist der Radius der FLÄCHE, nicht der der Zeile (s.
         `TABELLE_LINIE_EINZUG` in @kavacon/ui/tabelle). Als eigene Rolle,
         weil der flache Stil die Linie durchziehen lässt (0) statt sie
         einzurücken — der Radius allein könnte das nicht ausdrücken, er ist
         dort 8px und nicht 0. ---- */
  --linie-einzug:var(--radius-flaeche);

  /* ---- DER RAHMEN EINER FLÄCHE — eine Rolle, zwei Ausprägungen ----
         Im Standard grenzt eine Fläche sich über ihren Ruheschatten ab, im
         flachen Stil über eine Linie. Beides zusammen in EINER Rolle, damit
         die Fläche nicht wissen muss, welcher Stil gerade läuft.
         ⚠ Die Linie kommt an der Aufrufstelle als `outline` mit negativem
         Versatz heraus (Utility `flaeche-rahmen` in `app.css`), NICHT als
         `border`: Ein Rand kollidierte mit der 4px-Randzone der rollenden
         Tabellenfläche, und ein Ring AUSSERHALB der Box (`0 0 0 1px`) wird
         von der Rollzone darüber oben abgeschnitten; eine `outline` INNEN
         überdecken Zellflächen und klebende Kopfzeile. Die sichtbare Linie
         eines Stils ist deshalb ein echter Rand: die Randzone unten, mit
         Farbe `--color-flaeche-randzone` (colors.css). ---- */
  --flaeche-schatten:var(--shadow-sm);
  /* Was zwischen Rahmen und Inhalt einer rollenden Fläche liegt — die
     Rollzonen-Randzone aus layout.css (4 Abtrennung + Rinne + 4 Luft), als
     Rollen, damit ein Stil sie umwidmen kann: Randzone 1px und gefärbt ist
     der Rahmen, Innenluft und Rinne auf null lassen eine Zeilenlinie bis an
     ihn laufen. Die Rinne ist die reservierte Balkenspur (`scrollbar-gutter`).
     Ein Rand liegt im Layout — nichts überdeckt oder beschneidet ihn. */
  --flaeche-randzone:4px;
  --flaeche-innenluft:0.25rem;
  --flaeche-innenluft-karte:0.5rem;
  --flaeche-rinne:stable both-edges;

  /* ---- Abbildung der alten Namen (Bestand; nicht mehr erweitern) ----
         Das Kantenlicht hängt hier mit dran, damit auch der Bestand im
         Dunkelmodus seine Kante bekommt, ohne dass jede Stelle angefasst wird. */
  --shadow-xs:var(--shadow-rest),var(--card-inset);
  --shadow-sm:var(--shadow-rest),var(--card-inset);
  --shadow-md:var(--shadow-hover),var(--card-inset);
  --shadow-lg:var(--shadow-overlay),var(--card-inset);
  --shadow-xl:var(--shadow-overlay),var(--card-inset);

  --elevation-rest:var(--shadow-rest),var(--card-inset);
  --elevation-hover:var(--shadow-hover),var(--card-inset);
  /* Gedrückt heißt: Schatten AUS (§2.1, Knopf-Druck) — die Fläche sitzt auf. */
  --elevation-press:none;

  --elevation-raised:var(--shadow-rest),var(--card-inset);     /* Karten über Grund */
  --elevation-overlay:var(--shadow-overlay),var(--card-inset); /* Drawer / Popover / Menü */
  --elevation-modal:var(--shadow-overlay),var(--card-inset);   /* Dialoge / Befehlspalette */
}

:root {
  /* ---- z-index-Skala (IMMER diese benutzen, nie rohe Zahlen) ---- */
  --z-base:0;
  --z-dropdown:1000;
  --z-sticky:1100;
  --z-overlay:1200;
  --z-modal:1300;
  --z-popover:1400;
  --z-toast:1500;
  --z-tooltip:1600;
}