/* TCOChat Design-Tokens. EINZIGE Quelle fuer Farbe, Typo, Abstand, Radius, Motion.
   Regel: style.css definiert keine eigenen Farbwerte mehr, nur var(--...). */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Flaechen. Kein reines Schwarz - Tiefe entsteht durch Abstufung. */
  --bg:          #0f1419;   /* App-Hintergrund */
  --surface:     #161d24;   /* Kopfleisten, Karten, Composer */
  --surface-2:   #202a33;   /* Hover, Rahmen, Sekundaerflaechen */
  --surface-3:   #2b3742;   /* Aktiv, Trennlinien auf Surface-2 */
  --border:      #26323c;

  /* Marke. Dark = TCO-Gold, identisch zur TCO-Website. */
  --accent:      #D4AF37;
  --accent-hover:#e0c05a;
  --on-accent:   #17130a;   /* Text AUF der Akzentflaeche, dunkel = AA-konform */
  --accent-soft: rgba(212, 175, 55, 0.14);

  /* Text */
  --text:        #e6ebef;
  --text-muted:  #93a3af;
  --text-faint:  #6b7c88;

  /* Status */
  --danger:      #f2555a;
  --ok:          #3ecf8e;
  --warn:        #e9a13b;
  --on-danger:   #2b0b0d;   /* Text AUF Danger-Flaeche, dunkel = AA-konform */
  --on-ok:       #17130a;   /* Text AUF Ok/Erfolgs-Flaeche, dunkel = AA-konform in BEIDEN Themes (--ok ist hell in beiden) */

  /* Chat-Blasen. Bewusst NICHT WhatsApp-Gruen. */
  --bubble-out:  #2a2a1e;   /* eigene Nachricht, warm getoent zum Gold */
  --bubble-in:   #1c242c;   /* fremde Nachricht, neutral */
  --bubble-out-border: #3a3826;

  /* Typografie. Systemstack - keine Webfonts (Privatsphaere). */
  --font: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --fs-meta:    11px;   /* Zeitstempel, Zaehler */
  --fs-small:   12px;   /* Hilfetexte */
  --fs-label:   13px;   /* Formularlabels, Sekundaerzeilen */
  --fs-body:    15px;   /* Nachrichten, Kontaktnamen */
  --fs-lead:    17px;   /* Modal-Titel, Chat-Kopf */
  --fs-title:   20px;
  --fs-display: 26px;

  --lh-tight: 1.25;
  --lh-body:  1.45;

  --fw-normal: 400;
  --fw-medium: 550;
  --fw-bold:   700;

  /* Abstaende. 4px-Raster, keine Zwischenwerte erfinden. */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Radien. Genau diese fuenf Stufen. */
  --r-xs:   6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-full: 999px;

  /* Schatten. Zum Untergrund getoent, nie reines Schwarz. */
  --sh-1: 0 1px 2px rgba(6, 10, 14, 0.4);
  --sh-2: 0 4px 12px rgba(6, 10, 14, 0.45);
  --sh-3: 0 16px 40px rgba(6, 10, 14, 0.55);

  /* Motion. MOTION_INTENSITY 4 - spuerbar, nie theatralisch. */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Icon-Groessen als Tokens. Regel: keine freien Pixelwerte im Code. */
  --icon-sm: 14px;   /* Inline-Meta: Haken, Uhr */
  --icon-md: 20px;   /* Standard: Bedienelemente */
  --icon-lg: 34px;   /* Leerzustaende, Platzhalter */

  /* Layout */
  --sidebar-w: 380px;
  --bar-h: 60px;

  /* Fixe Werte, bewusst NICHT themenabhaengig: Video-/Foto-Buehne, dunkle
     Scrim-Overlays (Navi-Leiste, Sicherheits-Alarm) und die QR-Flaeche
     brauchen in JEDEM Theme denselben Kontrast, unabhaengig vom Akzent. */
  --fixed-dark:  #000;
  --fixed-light: #fff;
}

/* Light-Mode. Wird in Task 10 scharfgeschaltet, Werte stehen hier schon,
   damit kein Selektor spaeter Farben hart einsetzen muss. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:          #f4f6f8;
  --surface:     #ffffff;
  --surface-2:   #eaeef2;
  --surface-3:   #dde4ea;
  --border:      #d6dee5;

  --accent:      #0891B2;   /* TCO-Cyan */
  --accent-hover:#0aa6d0;
  --on-accent:   #ffffff;
  --accent-soft: rgba(8, 145, 178, 0.12);

  --text:        #14202b;
  --text-muted:  #566977;
  --text-faint:  #7d8f9c;

  --bubble-out:  #d6f0f7;
  --bubble-in:   #ffffff;
  --bubble-out-border: #b6e2ee;

  --sh-1: 0 1px 2px rgba(20, 32, 43, 0.08);
  --sh-2: 0 4px 12px rgba(20, 32, 43, 0.10);
  --sh-3: 0 16px 40px rgba(20, 32, 43, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; }
}