/* =========================================================================
   PyQuest · design.css  — Tokens, Basis, Buttons, Editor-Theming
   Überarbeitung (Drop-in-Ersatz). Eigene Identität: warmes Dunkel,
   Amber + Teal (Python-Nähe), eigene Schriften. Bewusst NICHT der
   generische Indigo-auf-Slate-Look. Inklusiv & neutral, nicht verkindlicht.
   Offline: keine externen Ressourcen; Fonts weiterhin lokal vendored.
   Neue Tokens sind mit  "NEU"  markiert.
   ========================================================================= */

/* ---- Vendored Fonts (Pfade unverändert -> bleibt drop-in) ---- */
@font-face {
  font-family: "Space Grotesk";
  src: url("/vendor/fonts/space-grotesk-500.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/vendor/fonts/space-grotesk-700.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/vendor/fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/vendor/fonts/jetbrains-mono-700.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}

:root {
  /* Warme, dunkle Flächen — stärkere Helligkeits-Spreizung für klare Elevation:
     Editor bleibt der dunkelste Punkt, Lese-/Nav-Zonen sind spürbar heller. */
  --bg: #1d1912;
  --bg-tint: #231e15;
  --surface: #2a241a;
  --surface-2: #342d20;
  --surface-3: #423928;
  --border: #453c2c;
  --border-soft: #342d1f;
  --border-strong: #574c37;   /* NEU · aktive Kontur / Level-Badge */
  --bg-deep: #14110b;         /* NEU · Editor/Konsole — dunkelster Punkt */

  /* Text — warmes Off-White, Sekundärtext auf WCAG-AA */
  --text: #f6f1e7;
  --text-muted: #cdc2ac;
  --text-faint: #9d927c;

  /* Akzente: Amber (primär) + Teal (sekundär) */
  --accent: #ffb340;
  --accent-strong: #f59e0b;
  --accent-soft: #ffc866;     /* NEU · hellere Kante / Hover */
  --accent-weak: #ffb3401f;
  --accent-line: #4a3a17;     /* NEU · gedämpfte Amber-Kontur (war inline) */
  --teal: #34d3b5;
  --teal-soft: #5ee0c8;       /* NEU */
  --teal-weak: #34d3b51f;
  --teal-line: #24463f;       /* NEU · gedämpfte Teal-Kontur (war inline) */
  --success: #7ed957;
  --success-weak: #7ed95720;
  --warning: #ffcf5c;
  --danger: #ff7a6b;
  --danger-weak: #ff7a6b1c;

  /* Gamification-System (NEU · kohärente Verläufe) */
  --grad-accent: linear-gradient(180deg, var(--accent), var(--accent-strong));
  --grad-xp: linear-gradient(90deg, #ffc866, var(--accent) 35%, var(--teal));
  --grad-teal: linear-gradient(180deg, var(--teal), #1fb598);
  --streak-glow: radial-gradient(circle at 50% 40%, #ffcf5c66, transparent 70%);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;            /* NEU */
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-accent: 0 6px 18px rgba(245, 158, 11, 0.26);  /* NEU */

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Space Grotesk", var(--font);
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --header-h: 62px;
  --sidebar-w: 288px;
}

/* ---- Optionales Light-Theme (Dark bleibt Default) ---- */
:root[data-theme="light"] {
  --bg: #f7f3ea;
  --bg-tint: #f1ebdd;
  --surface: #ffffff;
  --surface-2: #f3ecdd;
  --surface-3: #e7ddca;
  --border: #ddd2ba;
  --border-soft: #e9e0cd;
  --border-strong: #cbbd9e;
  --bg-deep: #262019;
  --text: #241d12;
  --text-muted: #5c5341;
  --text-faint: #7c7157;
  --accent-weak: #f59e0b1f;
  --accent-line: #e4c98a;
  --teal-line: #a9ddd0;
  --shadow: 0 18px 48px rgba(80, 60, 20, 0.18);
  --shadow-sm: 0 2px 10px rgba(80, 60, 20, 0.12);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { background: var(--bg); }  /* solide dunkle Grundfarbe -> keine weißen Flächen auf Mobile */

body {
  font-family: var(--font);
  /* dezente warme Lichtquellen statt flacher Fläche -> weniger „Template".
     KEIN background-attachment: fixed (rendert auf Mobile fehlerhaft weiß). */
  background-color: var(--bg);
  background-image:
    radial-gradient(900px 520px at 88% -10%, #3a2d16 0%, transparent 58%),
    radial-gradient(720px 480px at -6% 112%, #16302a 0%, transparent 54%);
  background-repeat: no-repeat;
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--display);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.4em;
  text-wrap: balance;
}
p { text-wrap: pretty; }

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-soft); }

code, kbd {
  font-family: var(--mono);
  font-size: 0.86em;
  line-height: 1.3;
  vertical-align: baseline;
  white-space: nowrap;
  background: var(--bg-deep);
  color: #ffd9a0;
  padding: 0.05em 0.42em;
  border-radius: 6px;
  border: 1px solid var(--border-soft);
}
pre {
  background: var(--bg-deep);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 12px 14px;
  overflow-x: auto;
}
pre code { background: none; border: none; padding: 0; color: #e8dcc4; white-space: pre; }

::selection { background: var(--accent-weak); }

* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: content-box; }

/* ---- Sichtbarer Tastatur-Fokus (WCAG 2.4.7 · bitte erhalten) ---- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.CodeMirror-focused { box-shadow: inset 0 0 0 2px var(--accent-weak); }

/* ============================== Buttons ================================= */
.btn {
  font: inherit;
  font-family: var(--display);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 1.05em;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
}
.btn:hover { background: var(--surface-3); border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
  background: var(--grad-accent);
  border-color: #d98a08;
  color: #241704;
  font-weight: 700;
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover {
  background: linear-gradient(180deg, var(--accent-soft), var(--accent));
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.36);
}

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

.btn-danger { color: var(--danger); border-color: transparent; background: var(--danger-weak); }
.btn-danger:hover { color: #ffb0a4; background: #ff7a6b2c; }

/* =========================================================================
   CodeMirror 5 · Editor-Theme (warm, ruhig — kein Neon-Overkill)
   Struktur unverändert, nur Token-Farben.
   ========================================================================= */
.CodeMirror {
  height: 100%;
  font-family: var(--mono);
  font-size: 14.5px;
  line-height: 1.65;
  background: var(--bg-deep);
  color: #ece3d1;
}
.CodeMirror-gutters { background: var(--bg-deep); border-right: 1px solid var(--border-soft); }
.CodeMirror-linenumber { color: #6b6350; }
.CodeMirror-cursor { border-left: 2px solid var(--accent); }
.CodeMirror-selected { background: #3a3320 !important; }
.CodeMirror-focused .CodeMirror-selected { background: #4a3d22 !important; }
.CodeMirror-activeline-background { background: #ffffff08; }

/* Präfix .cm-s-default nötig, damit diese Farben CodeMirrors mitgelieferte
   Default-Token-Farben (gleicher Präfix, dunkel & kontrastarm) überschreiben. */
.cm-s-default .cm-keyword  { color: #c8a3ff; font-weight: 600; }  /* if/for/def/in — sanftes Violett */
.cm-s-default .cm-def, .cm-s-default .cm-property { color: #7fe7d0; }  /* Funktionsnamen / Attribute */
.cm-s-default .cm-variable { color: #ece3d1; }
.cm-s-default .cm-variable-2 { color: #ffcf8f; }
.cm-s-default .cm-builtin  { color: #ffb340; }                    /* print/range/input — Amber */
.cm-s-default .cm-number   { color: #ffd27a; }
.cm-s-default .cm-string, .cm-s-default .cm-string-2 { color: #ff9d84; }  /* Strings — warmes Korall */
.cm-s-default .cm-comment  { color: #a99a7c; font-style: italic; }  /* etwas heller für Kontrast */
.cm-s-default .cm-operator { color: #d7cdb8; }
.cm-s-default .cm-atom     { color: #c8a3ff; }                    /* True/False/None */
.cm-s-default .cm-meta     { color: #b3a789; }
.cm-s-default .cm-error    { color: var(--danger); }
.CodeMirror-matchingbracket {
  color: var(--teal-soft) !important;
  font-weight: 700;
  border-bottom: 1px solid var(--teal);
}