/* ═══════════════════════════════════════════════════════════════
   Hirnparade UI-Kit — Brand-Tokens (Single Source of Truth)
   Wird NACH style.css geladen und übersteuert die Semantik-Variablen.
   Farben ändern? NUR hier. · Stand: 2026-07-06
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Roh-Palette hirnpara.de ── */
  --hp-weiss:   #ffffff;
  --hp-gelb:    #f1c11f;   /* Marken-Gelb (Primär-Aktion) */
  --hp-lila:    #9458c4;   /* Marken-Lila (Cleo) */
  --hp-violett: #8600ff;   /* Akzent-Violett */
  --hp-gold:    #ffc700;   /* Gelb-Hover / Warnung */
  --hp-grau:    #444444;
  --hp-schwarz: #000000;
  --hp-hell:    #f7f6f8;
  --hp-cyan:    #0fb8ce;   /* Info / Links / Status */

  /* Kontrast-Tints (aus der Palette abgeleitet, WCAG-geprüft) */
  --hp-lila-hell:  #a76fd6;  /* Lila für Text/Rahmen auf dunkel (5,2:1) */
  --hp-cyan-tief:  #0a7c8c;  /* Cyan für Text auf hell (4,6:1) */
}

/* ── DUNKEL (Standard — Studio-Look) ── */
:root {
  --bg:      #0d0c10;
  --panel:   #16141b;
  --panel2:  #1e1b25;
  --line:    #322e3c;
  --txt:     var(--hp-hell);
  --muted:   #a9a2b5;
  --accent:  var(--hp-gelb);
  --cleo:    var(--hp-lila-hell);
  --info:    var(--hp-cyan);
  --code-bg: var(--hp-schwarz);
  --ok:      #3ddc84;
  --warn:    var(--hp-gold);
  --on-accent: var(--hp-schwarz);  /* Text AUF Gelb */
  --on-cleo:   var(--hp-weiss);    /* Text AUF Lila */
  --bubble-user: #221f2b;
  --code-head:   #141218;
  --code-txt:    var(--hp-hell);
}

/* ── HELL (hirnpara.de-Web-Look) ── */
:root[data-theme="light"] {
  --bg:      var(--hp-hell);
  --panel:   var(--hp-weiss);
  --panel2:  var(--hp-weiss);
  --line:    #e2dee9;
  --txt:     var(--hp-schwarz);
  --muted:   var(--hp-grau);
  --accent:  var(--hp-gelb);
  --cleo:    var(--hp-violett);
  --info:    var(--hp-cyan-tief);
  --code-bg: #f0edf4;
  --ok:      #178a52;
  --warn:    #9a7b00;
  --on-accent: var(--hp-schwarz);
  --on-cleo:   var(--hp-weiss);
  --bubble-user: #f1ecf8;
  --code-head:   #e7e2ee;
  --code-txt:    var(--hp-schwarz);
}

/* ═══ Brand-Adapter: löst hartkodierte Farben in Komponenten ab ═══ */

/* Bubbles */
.msg.user, body[data-view="me"] .msg.user.mine { background: var(--bubble-user); }

/* Code-Blöcke */
.code .chead { background: var(--code-head); }
.code code { color: var(--code-txt); }

/* Text AUF Akzentflächen (Gelb → schwarz, Lila → weiß) */
.sendbtn { color: var(--on-accent); font-weight: 700; }
.scrollpill, #cleoModal .m-ok { background: var(--cleo); color: var(--on-cleo); }
#cleoModal .m-ok.danger, .btn.primary, .loginbox button { color: var(--on-accent); }
.badge { color: var(--txt); }

/* Header-Marke mit Gelb-Tupfer */
.brand { color: var(--txt); }
.brand small { color: var(--accent); }

/* Fokus sichtbar in Marken-Gelb (beide Themes) */
:focus-visible { outline: 2px solid var(--hp-gelb) !important; outline-offset: 2px; }

/* Heller Modus: weiße Panels brauchen Schatten-Tiefe statt Dunkel-Kontrast */
:root[data-theme="light"] .msg,
:root[data-theme="light"] .card,
:root[data-theme="light"] .loginbox { box-shadow: 0 1px 4px rgba(68, 68, 68, .12); }
:root[data-theme="light"] .bar { box-shadow: 0 1px 6px rgba(68, 68, 68, .10); }