/**
 * design-tokens.css - Goldene Regel Design Tokens
 * Zentrale Stelle für kritische Design-Werte.
 * Diese Datei schützt das visuelle Design vor versehentlichen Änderungen.
 *
 * Commit: f877395 (stabiler Stand)
 * @module ui/shared/design-tokens
 */

:root {
  /* ============================================
     GOLDENE REGEL - Health Glassmorphism Tokens
     ============================================ */

  /* Glass Effect - Modal/Sheet Background */
  --health-glass-blur: blur(20px);
  --health-glass-saturate: saturate(180%);
  --health-glass-bg: rgba(22, 22, 24, 0.96);

  /* Animation Easing - Swift iOS-style */
  --health-swift-easing: cubic-bezier(0.05, 0.7, 0.1, 1);

  /* Border Radius - Consistent Corners */
  --health-border-radius: 12px;

  /* Z-Index - Modal Layer */
  --health-z-modal: 1000;

  /* ============================================
     MODAL & BACKDROP TOKENS (Phase 4)
     Zentrale Steuerung für alle Overlays
     ============================================ */

  /* Backdrop/Scrim Styling */
  --modal-backdrop-bg: var(--health-glass-bg);
  --modal-backdrop-blur: var(--health-glass-blur);
  --modal-backdrop-saturate: var(--health-glass-saturate);

  /* Z-Index Hierarchie - kontrollierte Stapelung */
  --z-backdrop: 999;
  --z-modal-base: 1000;
  --z-modal-stacked: 1001; /* Für gestapelte Modale */

  /* Transition Timing */
  --modal-transition-duration: 300ms;
  --modal-transition-easing: var(--health-swift-easing);
}

/* ============================================
   SCROLL STABILITÄT
   Verhindert Layout-Sprung beim Öffnen von Modalen
   ============================================ */
html {
  scrollbar-gutter: stable;
}

/* Body-State wenn Modal offen */
html.modal-open,
body.modal-open {
  overflow: hidden;
  /* Verhindert iOS Safari bounce */
  overscroll-behavior: none;
}

/* ============================================
   PHASE 7: SWIPE-TO-CLOSE GESTENSTEUERUNG
   ============================================ */

/* Swipe Handle - Standard für alle Modale */
/* PHASE 7.8: Handle schwebt über Content, blockiert keine Buttons */
.bottom-sheet__handle,
.standard-modal__handle,
.swipe-handle {
  width: 60px;
  height: 24px; /* Trefferzone */
  background: transparent;
  border-radius: 2px;
  margin: 4px auto 8px auto;
  flex-shrink: 0;
  cursor: grab;
  touch-action: none;
  pointer-events: auto; /* Klickbar für Swipe */
  display: block;
  position: relative;
  z-index: 10;
}

/* Der sichtbare dünne Balken (4px) */
.bottom-sheet__handle::after,
.standard-modal__handle::after,
.swipe-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 4px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 2px;
}

.bottom-sheet__handle:active::after,
.standard-modal__handle:active::after,
.swipe-handle:active::after {
  background: rgba(255, 255, 255, 0.6);
}

/* PHASE 7.9: OMNI-BRECHSTANGE - Versteckt ALLES was nach Schließen aussieht */
body.modal-open [class*="close"],
body.modal-open [id*="close"],
body.modal-open [aria-label*="close" i],
body.modal-open [aria-label*="schließen" i],
body.modal-open .x-mark,
body.modal-open .cancel-btn,
body.modal-open svg[class*="x"],
body.modal-open .close-icon,
body.modal-open .icon-close,
body.modal-open [data-icon="close"],
body.modal-open .material-symbols-outlined:is([class*="close"]) {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Swipe-Animation (nur transform, kein Reflow) */
.bottom-sheet--swiping,
.standard-modal--swiping {
  transition: none !important;
  will-change: transform;
}

/* Zurückschnappen Animation */
.bottom-sheet--snapping,
.standard-modal--snapping {
  transition: transform var(--modal-transition-duration)
    var(--health-swift-easing) !important;
}