/* ─── Theme-Tokens ───
 * Standard ist Dark. Light greift nur, wenn /theme.js data-theme="light" auf
 * <html> setzt (explizite Wahl ueber den Umschalter, gespeichert in localStorage).
 *
 * Die Basis-Tokens (--bg, --text, --accent ...) definiert jede Seite weiterhin
 * selbst im eigenen :root (Dark-Werte). Hier stehen nur:
 *  - zusaetzliche Tokens, die alle Seiten teilen (Overlays, Editor, Syntax ...)
 *  - die Light-Overrides. :root[data-theme="light"] ist spezifischer als :root
 *    und gewinnt deshalb unabhaengig von der Reihenfolge der Stylesheets.
 */

:root {
  color-scheme: dark;

  /* RGB-Kanaele fuer rgba(var(--x-rgb), alpha) */
  --fg-rgb: 255, 255, 255;
  --accent-rgb: 255, 77, 106;
  --success-rgb: 63, 185, 80;
  --shadow-rgb: 0, 0, 0;
  --shadow-k: 1;

  --backdrop: rgba(4, 3, 8, 0.75);
  --nav-bg: rgba(8, 9, 13, 0.8);
  --logo-text: #ffffff;
  --logo-accent: #ff5c7c;
  --logo-glow: drop-shadow(0 0 6px rgba(255, 92, 124, 0.6));
  --accent-gradient-end: #ff8fa3;

  --text-strong: #ffffff;
  --text-soft: #d0d8e0;
  --text-popup: #b0b8c8;
  --text-popup-strong: #e0e4ea;
  --code-yellow: #f0c674;
  --success-text: #86d992;
  --success-hover: #4cc764;
  --accent-text: #ff8aa0;

  --bg-popup: linear-gradient(145deg, #1a1225 0%, #140e1c 100%);
  --bg-err-hint: linear-gradient(135deg, #1e1028 0%, #1a0e22 100%);
  --bg-diff: linear-gradient(135deg, #141620 0%, #0f1118 100%);
  --bg-stdin: #0a0d14;
  --bg-titlebar: #0c0e16;
  --bg-code-inline: #181c28;
  --border-hover: #252a38;
  --dot: #1e2230;

  /* Code-Editor (CodeMirror) */
  --cm-bg: #0d1017;
  --cm-text: #c9d1d9;
  --cm-caret: #ff4d6a;
  --cm-selection: #1e3055;
  --cm-active-line: #131a26;
  --cm-gutter: #2a3345;
  --cm-gutter-active: #6e8090;
  --cm-bracket-bg: #2a354880;
  --cm-bracket-outline: #ff668880;
  --cm-selection-match: #1a2844;
  --cm-indent: #1a2030;
  --cm-indent-active: #2a3548;

  /* Syntax-Highlighting */
  --syn-keyword: #ff6688;
  --syn-type: #80cbc4;
  --syn-class: #7ecbf6;
  --syn-method: #e2c07b;
  --syn-ident: #c9d1d9;
  --syn-const: #f0a56c;
  --syn-string: #a8d4a0;
  --syn-escape: #d4a8e0;
  --syn-number: #f0c674;
  --syn-comment: #546e7a;
  --syn-doc: #6a8a7a;
  --syn-annotation: #c792ea;
  --syn-operator: #e8856c;
  --syn-separator: #89a0b0;
  --syn-brace: #d4a868;
  --syn-paren: #abb2bf;
}

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

  /* Basis-Tokens der Seiten */
  --bg: #f6f7f9;
  --bg-panel: #ffffff;
  --bg-surface: #eef0f4;
  --bg-editor: #ffffff;
  --bg-output: #f8f9fb;
  --bg-card: #ffffff;
  --bg-card-hover: #f3f4f7;
  --bg-code: #f6f8fa;
  --accent: #c81e45;
  --accent-hover: #b0183b;
  --accent-glow: rgba(200, 30, 69, 0.18);
  --accent-subtle: rgba(200, 30, 69, 0.07);
  --accent-soft: rgba(200, 30, 69, 0.07);
  --text: #3b4250;
  --text-bright: #11151c;
  --text-dim: #5f6b7a;
  --text-muted: #8a94a1;
  --success: #1a7f37;
  --success-bg: rgba(26, 127, 55, 0.1);
  --green: #1a7f37;
  --green-soft: rgba(26, 127, 55, 0.08);
  --error: #cf222e;
  --error-bg: rgba(207, 34, 46, 0.08);
  --border: #dfe3ea;
  --border-bright: #c9cfd9;

  --fg-rgb: 15, 20, 30;
  --accent-rgb: 200, 30, 69;
  --success-rgb: 26, 127, 55;
  --shadow-rgb: 30, 35, 50;
  --shadow-k: 0.3;

  --backdrop: rgba(20, 16, 28, 0.45);
  --nav-bg: rgba(246, 247, 249, 0.85);
  --logo-text: #11151c;
  --logo-accent: #c81e45;
  --logo-glow: none;
  --accent-gradient-end: #e0436b;

  --text-strong: #11151c;
  --text-soft: #3b4250;
  --text-popup: #4a5260;
  --text-popup-strong: #11151c;
  --code-yellow: #8a5a00;
  --success-text: #1a7f37;
  --success-hover: #218c3f;
  --accent-text: #c0213f;

  --bg-popup: #ffffff;
  --bg-err-hint: #fff5f7;
  --bg-diff: #ffffff;
  --bg-stdin: #f8f9fb;
  --bg-titlebar: #eef0f4;
  --bg-code-inline: #eef0f4;
  --border-hover: #c9cfd9;
  --dot: #d5d9e0;

  --cm-bg: #ffffff;
  --cm-text: #24292f;
  --cm-caret: #c81e45;
  --cm-selection: #cfe3ff;
  --cm-active-line: #f3f5f8;
  --cm-gutter: #b5bcc6;
  --cm-gutter-active: #57606a;
  --cm-bracket-bg: #dbe4ef;
  --cm-bracket-outline: #c81e4580;
  --cm-selection-match: #e3edff;
  --cm-indent: #eceff3;
  --cm-indent-active: #d0d7de;

  --syn-keyword: #c41d5a;
  --syn-type: #0b7a75;
  --syn-class: #0550ae;
  --syn-method: #7a4f00;
  --syn-ident: #24292f;
  --syn-const: #b35900;
  --syn-string: #116329;
  --syn-escape: #8250df;
  --syn-number: #9a6700;
  --syn-comment: #6e7781;
  --syn-doc: #57735f;
  --syn-annotation: #8250df;
  --syn-operator: #b5401f;
  --syn-separator: #57606a;
  --syn-brace: #8a5a00;
  --syn-paren: #57606a;
}

/* ─── Umschalter ─── */

/* Gruppiert Umschalter + vorhandene Header-Aktion (Startseite, Rechtsseiten) */
.theme-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.theme-toggle:hover {
  color: var(--text-bright);
  border-color: var(--text-dim);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.theme-toggle svg {
  width: 16px;
  height: 16px;
}
/* ─── Sprachumschalter (Menue) ─── */

.lang-menu {
  position: relative;
  flex-shrink: 0;
}
.lang-menu-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color 0.2s, border-color 0.2s;
}
.lang-menu-button::-webkit-details-marker { display: none; }
.lang-menu-button:hover,
.lang-menu[open] .lang-menu-button {
  color: var(--text-bright);
  border-color: var(--text-dim);
}
.lang-menu-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.lang-menu-button svg { transition: transform 0.2s; }
.lang-menu[open] .lang-menu-button svg { transform: rotate(180deg); }
.lang-menu-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 200;
  min-width: 140px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--bg-panel, var(--bg-card, var(--bg)));
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(var(--shadow-rgb), calc(0.45 * var(--shadow-k)));
}
.lang-menu-item {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
a.lang-menu-item:hover {
  color: var(--text-bright);
  background: rgba(var(--fg-rgb), 0.06);
}
.lang-menu-item[aria-current] {
  color: var(--accent);
  font-weight: 600;
}
.lang-menu-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Dark: Sonne zeigen (wechselt zu Light). Light: Mond zeigen. */
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }