/* Design System Erweiterung — klinische Werte für das QR-Info-Portal.
   Single-Owner aller clinical-* Tokens inklusive Dark-Mode-Flips.

   Dark-Mode-Trigger decken sich mit design-tokens.css/dark-mode.css:
     1. @media (prefers-color-scheme: dark) — OS-Level
     2. body.dark-mode                      — User-Toggle (localStorage)
     3. body[data-theme="dark"]             — Admin-Setting (Server)

   WICHTIG: Surface- und Ink-Tokens flippen immer als Paar.
   Wer nur eins von beiden nutzt, erzeugt unlesbaren Kontrast. */

:root {
  /* Klinische Status-Farben (gedämpft, nicht consumer-grell) */
  --clinical-green: #047857;
  --clinical-green-bg: #ECFDF5;
  --clinical-red: #B91C1C;
  --clinical-red-bg: #FEF2F2;
  --clinical-amber: #B45309;
  --clinical-amber-bg: #FFFBEB;

  /* Surfaces + Ink (Light Mode) */
  --clinical-surface: #FFFFFF;
  --clinical-paper: #F8FAFC;
  --clinical-rule: #E2E8F0;
  --clinical-ink: #1A2332;
  --clinical-ink-soft: #4A5568;
  --clinical-heading: #084748;
  --clinical-icon: #0F766E;

  /* Thai-Typografie (Sarabun braucht mehr Raum als Latin) */
  --thai-body-size: 1.0625rem;
  --thai-line-height: 1.7;
  --thai-spacing: normal;

  /* Z-Index-Hierarchie */
  --layer-base: 1;
  --layer-sticky: 100;
  --layer-dropdown: 150;
  --layer-bottom-nav: 200;
  --layer-overlay: 500;
  --layer-modal: 1000;
  --layer-toast: 1100;

  /* Mobile Layout-Maße */
  --mobile-bottom-nav-height: 60px;
  --mobile-status-bar-height: 44px;
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Dark Mode: OS-Level (muss zu design-tokens.css:230 passen) */
@media (prefers-color-scheme: dark) {
  :root {
    --clinical-surface: #1A2332;
    --clinical-paper: #0F1419;
    --clinical-rule: #2D3748;
    --clinical-ink: #E8ECF1;
    --clinical-ink-soft: #A0AEC0;
    --clinical-heading: #99F6E4;
    --clinical-icon: #2DD4BF;
    --clinical-green-bg: #064E3B;
    --clinical-red-bg: #7F1D1D;
    --clinical-amber-bg: #78350F;
  }
}

/* Dark Mode: User-Toggle / Admin-Setting (muss zu dark-mode.css passen) */
body.dark-mode,
body[data-theme="dark"] {
  --clinical-surface: #1A2332;
  --clinical-paper: #0F1419;
  --clinical-rule: #2D3748;
  --clinical-ink: #E8ECF1;
  --clinical-ink-soft: #A0AEC0;
  --clinical-heading: #99F6E4;
  --clinical-icon: #2DD4BF;
  --clinical-green-bg: #064E3B;
  --clinical-red-bg: #7F1D1D;
  --clinical-amber-bg: #78350F;
}