/* UI-01 — Token-Layer Tappr-Design-System · Quelle 11_design.md */
/* Co-existiert additiv mit tokens.css. Cutover in späteren Phasen. */

:root {
  --tappr-red: #E94E2D;
  --tappr-red-soft: #FCE9E3;
  --tappr-red-text: #B23A1F;
  --tappr-ink: #141414;
  --tappr-ink-2: #3A3A3A;
  --tappr-mute: #6B6B6B;
  --tappr-mute-2: #9A968F;
  --tappr-bg: #FFFFFF;
  --tappr-bg-soft: #F6F4EF;
  --tappr-bg-softer: #FAFAF7;
  --tappr-border: #E7E3DC;
  --tappr-border-2: #EFECE6;
  --tappr-ok: #0E8A4E;
  --tappr-ok-soft: #E6F4EC;
  --tappr-pill-bg: #F1EEE8;
  --tappr-shadow: 0 12px 32px rgba(20,20,20,.08), 0 2px 6px rgba(20,20,20,.04);

  /* UI-EDIT-LIB-01 — Eases + Z-Index-Skala fuer Edit-Pages */
  --tappr-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --tappr-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --tappr-modal-z: 40;
  --tappr-modal-stacked-z: 50;

  /* UI-TABLE-FLAT-01 (18.05.2026) — Page-BG flach weiss.
   * Zebra wurde entfernt; thead bleibt cremig (--tappr-table-header-bg).
   * Dashboard behaelt cremigen BG ueber body[data-page="dashboard"]-
   * Override in components-tappr.css (UI-DASHBOARD-BG-01).
   * Dark-Wert bleibt #0F0E0D. */
  --tappr-bg-page: #FFFFFF;

  /* UI-TABLE-FLAT-01 — thead-Hintergrund + Row-Hover (Light).
   * UI-TABLE-FLAT-04 (18.05): Hover-Ton == Header-Ton (var(--tappr-bg-soft)),
   * Owner-Visual-Wunsch. Zeile wandert beim Hover auf Header-Niveau. */
  --tappr-table-header-bg: var(--tappr-bg-soft);
  --tappr-table-row-hover: var(--tappr-bg-soft);

  /* UI-DEVICES-CARD-REDESIGN-01 — Warn-Token + Card-Shadows */
  --tappr-warn: #E69500;
  --tappr-warn-soft: #FBEFD9;
  --shadow-card: 0 1px 2px rgba(20,20,20,.04);
  --shadow-elev: 0 8px 24px rgba(20,20,20,.06), 0 2px 6px rgba(20,20,20,.04);
}

:root[data-theme="dark"] {
  --tappr-red: #FF6A47;
  --tappr-red-soft: #3A1A12;
  --tappr-red-text: #FFB39E;
  --tappr-ink: #F4F1EB;
  --tappr-ink-2: #D8D3CA;
  --tappr-mute: #9A968F;
  --tappr-mute-2: #6B6864;
  --tappr-bg: #141312;
  --tappr-bg-soft: #1D1B1A;
  --tappr-bg-softer: #1A1817;
  --tappr-border: #2E2C2A;
  --tappr-border-2: #262422;
  --tappr-ok: #4DD18A;
  --tappr-ok-soft: #0F2A1D;
  --tappr-pill-bg: #262422;
  --tappr-shadow: 0 12px 32px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);

  --tappr-bg-page: #0F0E0D;
  --tappr-warn: #FFB347;
  --tappr-warn-soft: #3D2D14;
  --shadow-card: 0 1px 2px rgba(0,0,0,.3);
  --shadow-elev: 0 8px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);

  /* UI-TABLE-FLAT-01 — thead-Hintergrund + dezenter Row-Hover (Dark). */
  --tappr-table-header-bg: var(--tappr-bg-soft);
  --tappr-table-row-hover: var(--tappr-pill-bg);
}

/* Body-BG-Override — gilt fuer alle Backoffice-Pages die tokens-tappr.css laden.
 * Inversion zur Legacy-Logik: Page weiss, Tabellen-Innenraum cremig. */
/* !important weil base.css spaeter im Cascade kommt und body { background: var(--bg) } setzt */
body {
  background: var(--tappr-bg-page) !important;
}