/* ============================================================
   EFFECTS — elevation, shadows, backdrop  ·  Bewerbungsmanager
   ------------------------------------------------------------
   One elevation ramp so a future dark mode redefines elevation in
   ONE place. Snap targets are real shadows lifted from the app, so
   each level already shipped.

   Phase 0: legacy --shadow-card / --shadow-modal consolidated onto
   the ramp. Migration: --shadow-card → --shadow-xs; --shadow-modal →
   --shadow-xl (xl now IS the former modal recipe — soft + hairline
   ring; the old harsh 0.3 xl was retired: "Ruhe vor Reiz").

   BESTÄTIGT (Session 5) — Ebenen-Zuordnung:
     xs Karte ruhend · sm Karte hover/Dropdown · md Popover ·
     lg gezogene Karte (Drag) · xl Modal/Sheet.

   DARK (Session 5): Schatten allein trennen im Dunkeln kaum —
   Elevation trägt dort primär die SURFACE-STUFE (--surface →
   -2 → -3, tokens/colors.css); die Schatten werden tiefer
   (höheres Alpha), xl bekommt einen hellen Hairline-Ring.
   Motion der Overlays: tokens/motion.css (--ease-accommodation).
   ============================================================ */

:root {
  /* ===== Elevation ramp ===== */
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.07);
  --shadow-sm:    0 4px 24px rgba(0,0,0,0.1);
  --shadow-md:    0 10px 32px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-lg:    0 16px 40px rgba(0,0,0,0.20), 0 5px 12px rgba(0,0,0,0.12);
  --shadow-xl:    0 24px 80px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05); /* modal level */
  --shadow-inset: inset 0 2px 5px rgba(0,0,0,0.05);
  --shadow-ring:  0 0 0 2px rgba(0,0,0,0.08);

  /* ===== Focus (Session 7) — EIN Rezept für alle interaktiven
     Atoms: innen der Vivid, außen der Soft-Hof. Immer über
     :focus-visible (nie :focus), immer dieses Token — kein
     freier outline. Dark erbt automatisch über die Farb-Tokens. ===== */
  --focus-ring:        0 0 0 1.5px var(--accent), 0 0 0 4px var(--accent-soft);
  --focus-ring-danger: 0 0 0 1.5px var(--red),    0 0 0 4px var(--red-soft);
  --drop-shadow-float: drop-shadow(0 18px 36px rgba(0,0,0,0.08)) drop-shadow(0 4px 10px rgba(0,0,0,0.04));

  /* ===== Backdrop — human-eye-style defocus for overlays.
     The attention cue is the accommodation animation, not raw blur. ===== */
  --backdrop-bokeh:      blur(12px) saturate(1.2); /* @kind other */
  --backdrop-tint:       rgba(245, 242, 238, 0.1);
  --backdrop-bokeh-rest: blur(0) saturate(1); /* @kind other */
  --backdrop-tint-rest:  rgba(245, 242, 238, 0);
}

/* ===== Dark Mode (Session 5) — nur Semantik umgelenkt ===== */
[data-theme="dark"] {
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.35);
  --shadow-sm:    0 4px 24px rgba(0,0,0,0.45);
  --shadow-md:    0 10px 32px rgba(0,0,0,0.50), 0 2px 6px rgba(0,0,0,0.35);
  --shadow-lg:    0 16px 40px rgba(0,0,0,0.60), 0 5px 12px rgba(0,0,0,0.40);
  --shadow-xl:    0 24px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.08); /* Ring wird hell */
  --shadow-inset: inset 0 2px 5px rgba(0,0,0,0.35);
  --shadow-ring:  0 0 0 2px rgba(255,255,255,0.14);
  --drop-shadow-float: drop-shadow(0 18px 36px rgba(0,0,0,0.40)) drop-shadow(0 4px 10px rgba(0,0,0,0.25));

  /* Backdrop: gleiche Bokeh-Optik, Tint kippt ins dunkle Papier */
  --backdrop-tint:       rgba(28, 25, 20, 0.35);
  --backdrop-tint-rest:  rgba(28, 25, 20, 0);
}