/* =============================================================
   x-trading · UX-Redesign — Design Tokens
   Quelle: Entwurf "x-trading Cockpit.dc.html" (HEINI MODUS, dark)
   Repo-First: KEIN neues Design-System. Wenn die Companion-SPA
   bereits eine dieser Variablen definiert, die vorhandene behalten
   und diese Datei nur um die fehlenden ergänzen.
   Einbau: als erstes <link> vor der bestehenden App-CSS.
   ============================================================= */

:root {
  color-scheme: dark;

  /* Flächen */
  --xt-bg:            #050b16;  /* ruhige Broker-Basis, Seitenhintergrund */
  --xt-surface:       #0d182a;  /* Karten */
  --xt-surface-sunk:  rgba(5, 11, 22, 0.72); /* Felder in Karten */
  --xt-border:        #26374f;
  --xt-hairline:      rgba(241, 245, 249, 0.10); /* Karten-Ring */
  --xt-shadow-card:   0 1px 3px rgba(0, 0, 0, 0.4);
  --xt-shadow-pop:    0 8px 24px rgba(0, 0, 0, 0.5);

  /* Text — AA-geprüft auf --xt-bg und --xt-surface */
  --xt-text:          #f1f5f9;  /* Überschriften, Werte */
  --xt-text-muted:    #94a3b8;  /* Fließtext sekundär (4.5:1 ✔) */
  --xt-text-mono:     #cbd5e1;  /* Mono-Werte */
  /* NICHT für Text benutzen: #64748b (3.6:1) — fällt durch WCAG AA. */

  /* Marke */
  --xt-primary:       #2563eb;  /* Weiß auf Primärfläche: 5.17:1 (WCAG AA) */
  --xt-primary-fg:    #ffffff;
  --xt-primary-soft:  rgba(47, 109, 246, 0.13);
  --xt-primary-line:  rgba(74, 139, 255, 0.34);
  --xt-primary-text:  #a8c7ff;  /* klares Aktionsblau auf dunkel, AA ✔ */

  /* Semantik — nur für Status, nie dekorativ */
  --xt-ok:            #4ade80;  /* Textfarbe grün (AA ✔) */
  --xt-ok-dot:        #22c55e;  /* Punkt/Fläche */
  --xt-ok-soft:       rgba(34, 197, 94, 0.12);
  --xt-ok-line:       rgba(34, 197, 94, 0.35);
  --xt-warn:          #fbbf24;
  --xt-warn-dot:      #f59e0b;
  --xt-warn-soft:     rgba(245, 158, 11, 0.12);
  --xt-warn-line:     rgba(245, 158, 11, 0.40);
  --xt-bad:           #fca5a5;
  --xt-bad-dot:       #ef4444;
  --xt-bad-soft:      rgba(239, 68, 68, 0.12);
  --xt-bad-line:      rgba(239, 68, 68, 0.40);
  --xt-approve:       #059669;  /* nur "Freigeben" */
  --xt-reject:        #f87171;  /* nur Text-Link "Ablehnen" */

  /* Typografie */
  --xt-font:          "Geist", system-ui, -apple-system, sans-serif;
  --xt-font-mono:     "Geist Mono", ui-monospace, Menlo, monospace;
  --xt-fs-h1:         26px;   /* Wahrheitszeile Desktop */
  --xt-fs-h1-m:       21px;   /* Wahrheitszeile Mobil */
  --xt-fs-h2:         20px;   /* Screen-Titel */
  --xt-fs-card:       16px;   /* Kartentitel */
  --xt-fs-body:       14px;   /* Basis */
  --xt-fs-meta:       12px;   /* Meta, Chips */

  /* Raster & Radien (4px-Grid) */
  --xt-gutter:        24px;
  --xt-card-pad:      16px;
  --xt-gap:           16px;
  --xt-r-input:       8px;
  --xt-r-btn:         10px;
  --xt-r-card:        12px;
  --xt-r-pill:        999px;

  /* Trefferflächen — Pflicht aus dem Audit (P1-UX-02) */
  --xt-touch-min:     44px;   /* jedes Touch-Ziel */
  --xt-btn-primary-h: 52px;   /* eine Hauptaktion */
  --xt-btn-h:         40px;   /* Desktop-Sekundäraktion */
  --xt-navbar-h:      66px;   /* mobile Bottom-Nav, NICHT höher */
}

/* Notwendige globale Regeln (mehr nicht) */
.xt-focus-visible:focus-visible,
:root a:focus-visible,
:root button:focus-visible,
:root [tabindex]:focus-visible {
  outline: 2px solid var(--xt-primary-text);
  outline-offset: 2px;
}

@keyframes xt-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
}