@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700&display=swap");

:root {
  --color-primary: #8c52ff;
        --color-primary-dark: #6f38e0;
        --color-secondary: #ffcf00;
        --color-accent: #ffcf00;
        --gradient-primary: linear-gradient(135deg, #8255d9 0%, #9d7ae6 100%);
        --color-primary-rgb: 140, 82, 255;
        --color-secondary-rgb: 255, 207, 0;
        --color-primary-dark-rgb: 111, 56, 224;
        --gradient-primary-subtle: linear-gradient(135deg, rgba(140, 82, 255, 0.1) 0%, rgba(255, 207, 0, 0.1) 100%);
        --surface-page: #000000;
        --surface-card: #121212;
        --surface-input: #1c1c1c;
        --surface-muted: #252525;
        --text-body: #efedea;
        --text-heading: #ffffff;
        --text-muted: #8f8f8f;
        --border-soft: rgba(255, 255, 255, 0.14);
        --shadow-card-color: rgba(0, 0, 0, 0.6);
        --on-primary: #ffffff;
        --font-body: 'Inter', sans-serif;
        --font-heading: 'Archivo Black', 'Inter', sans-serif;
}

/* ── Partner theme: AdmissionLabs ───────────────────────────── */

/* Token aliases. Large parts of the codebase already read theme tokens
   through fallbacks — var(--card-bg, #fff), var(--text-secondary, #666) —
   that nothing ever defined. Defining them here makes those call sites,
   including inline style attributes such as detail.js's #videoRatingBar,
   follow the partner palette without any specificity fight.
   Partner-only on purpose: the fallbacks differ per call site (#666 vs
   #888), so defining them globally would visibly unify our own domains. */
:root {
  --card-bg: var(--surface-card);
  --bg-secondary: var(--surface-muted);
  --border-color: var(--border-soft);
  --border: var(--border-soft);
  --text-primary: var(--text-body);
  --text-secondary: var(--text-muted);
  --primary: var(--color-primary);
  --color-primary-light: rgba(var(--color-primary-rgb), 0.18);
}

body {
  background-color: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
}

h1, h2, h3, h4,
.video-card h3, .channel-card h3, .vocab-card h3, .sentence-card h3,
.feature-card h3 {
  color: var(--text-heading);
  font-family: var(--font-heading);
}

/* Panels and cards — the white surfaces of public/style.css */
.container, .top-bar, .user-header, .features-section, .cloze-section,
.practice-mode-selector, .abs-result-stats, .abs-error-list,
.video-card, .channel-card, .vocab-card, .sentence-card, .feature-card,
.selected-word-item, .word-selection-item, .question-test,
.transcribed-text, .dictation-result,
.word-selection-modal-content, .word-practice-content,
.success-modal-content, .sentences-modal-content,
.context-modal-content, .production-dictation-content {
  background-color: var(--surface-card);
  color: var(--text-body);
  border-color: var(--border-soft);
  box-shadow: 0 4px 15px var(--shadow-card-color);
}

/* detail.html surfaces. Collected by auditing the rendered page for
   light backgrounds, so the list reflects what actually ships. */
.learning-tabs, .tab-navigation, .tab-button,
#summaryContent, #summarySentencesContainer, .transcript-link {
  background-color: var(--surface-card);
  color: var(--text-body);
  border-color: var(--border-soft);
}

/* Higher specificity on purpose. #videoRatingBar (detail.js) and .msw-btn
   (modules/mic-select.js) inject their CSS at runtime, so they land behind
   this file; a tie would lose. .tab-button.active is (0,2,0) in detail.html
   and likewise needs to be matched, not merely equalled. */
body #videoRatingBar,
body #micSelectWidget .msw-btn, body #micSelectWidget .msw-panel {
  background-color: var(--surface-card);
  color: var(--text-body);
  border-color: var(--border-soft);
}
body .tab-button.active {
  background-color: var(--surface-muted);
  color: var(--text-heading);
}
.tab-navigation { background-color: var(--surface-muted); }
.tab-number, .tab-badge {
  background-color: var(--surface-muted);
  color: var(--text-body);
}

/* Vocabulary tab (detail.html). Its panels were the last light surfaces in
   the learner journey. The inline styles in the markup carry var() tokens
   now, so only the selector-reachable ones are listed here. */
.vocabulary-section, .vocab-box, .practice-hint {
  background-color: var(--surface-card);
  color: var(--text-body);
  border-color: var(--border-soft);
}

/* body-Praefix ist Absicht: detail.html fuehrt einen zweiten <style>-Block
   IM BODY (ab Z. 2006), der jede gleichstarke Regel aus dem <head> schlaegt.
   Den Branding-Link nach hinten zu ziehen hilft dort nicht — Body-Styles
   kommen in der Kaskade immer nach Head-Styles. */
body .vocab-controls, body .vocab-stats, body .box-header {
  background-color: var(--surface-muted);
  color: var(--text-body);
  border-color: var(--border-soft);
}
body .box-tab, body .box-tab.active {
  background-color: var(--surface-card);
  color: var(--text-body);
  border-color: var(--border-soft);
}
body .stat-label, body .stat-value,
body #totalWords, body #uniqueWords, body #learnedWords {
  color: var(--text-body);
}
body .stat-label { color: var(--text-muted); }

/* Ueberschrift und Beschreibung der Faecher stehen im Body-<style>-Block. */
body .box-header h3 { color: var(--text-heading); }
body .box-header .box-description { color: var(--text-muted); }

/* Ohne Hintergrundregel faellt der Knopf auf das Grau des Browsers zurueck. */
body #loadVocabBtn, body #vlStartBtn, body #startQuestionsBtn,
body .vocabulary-section .btn {
  background-color: var(--surface-card);
  color: var(--text-body);
  border-color: var(--border-soft);
}

/* CEFR level pills keep their level colour as the border. Two text colours
   are too dark to read on a dark surface, so the partner theme lifts them to
   the brighter variant; A1/A2 and C1 already carry enough contrast. */
:root {
  --cefr-b-text: #ffc107;
  --cefr-c2-text: #a98eda;
  /* Eigene Namen statt --border-soft/--text-muted: deren helle Defaults
     weichen von den Werten dieser drei Stellen ab, und da die Tokens fuer
     ALLE Domains definiert sind, greift dort kein Fallback mehr. */
  --vocab-panel-border: var(--border-soft);
  --vocab-select-border: var(--border-soft);
  --vocab-select-text: var(--text-muted);
  /* detail.js schreibt diese drei zur Laufzeit ins style-Attribut. */
  --vocab-dim-bg: var(--surface-muted);
  --vocab-dim-text: var(--text-muted);
  --vocab-cefr-section-bg: var(--surface-muted);
  --surface-alt: var(--surface-muted);
  --label-text: var(--text-body);
  --muted-soft: var(--text-muted);
}

/* Panels of the remaining detail.html tabs (Vorlesen, Sprechen, Lueckentexte,
   Fragen). These live in public/style.css, not in the page, so the sweep over
   detail.html's own colours did not reach them. */
body .vorlesen-text-container, body .placeholder-text,
body .cloze-type-selector, body .section {
  background-color: var(--surface-muted);
  color: var(--text-body);
  border-color: var(--border-soft);
}
body .placeholder-text, body .loading-detail { color: var(--text-muted); }
body .cloze-type-selector label { color: var(--text-body); }
body .loading-message, body .loading-message p { color: var(--text-muted); }

/* Form controls. The filter classes must be named explicitly: a bare
   "select" (0,0,1) loses against style.css's .category-filter (0,1,0). */
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="number"], select, textarea,
.category-filter, .sort-filter, .subtitle-quality-filter {
  background-color: var(--surface-input);
  color: var(--text-body);
  border-color: var(--border-soft);
  font-family: var(--font-body);
}
::placeholder { color: var(--text-muted); opacity: 1; }

/* Secondary text */
.search-info, .radio-label, .checkbox-label, .user-info,
.video-meta, .card-meta, .video-channel, .video-description,
.channel-meta, .youtube-search-toggle,
.sort-options label { color: var(--text-muted); }

/* Neutral chips (category pills) — grey surface, not a status colour */
.video-category, .channel-category {
  background-color: var(--surface-muted);
  color: var(--text-muted);
}

/* Controls that were white panels rather than brand-coloured buttons */
.vis-pill, .pagination-button, .cta-secondary, .filter-checkbox,
.cloze-type-btn, .cloze-option-btn, .question-option-btn, .word-option,
.abs-mode-btn, .abs-source-btn, .abs-switch-mode-btn, .abs-diktat-btn,
.vorlesen-source-btn, .mini-play-slow-btn {
  background-color: var(--surface-card);
  color: var(--text-body);
  border-color: var(--border-soft);
}

/* Brand-coloured controls need legible text on the primary colour */
button, .btn { font-family: var(--font-body); }
#searchButton, .vis-pill.active, .pagination-button.active {
  background-color: var(--color-primary);
  color: var(--on-primary);
  border-color: var(--color-primary);
}

/* The beta toolbar (language switcher) injects its stylesheet at runtime,
   so it sits after this file in the cascade. Only HIGHER specificity wins —
   hence the id prefixes. */
body #beta-toolbar-buttons, body #beta-toolbar .bt-panel {
  background: var(--surface-card);
  border-color: var(--border-soft);
  color: var(--text-body);
}
body #bt-lang-toggle, body #bt-learn-lang-toggle, body #bt-feedback-toggle,
body #beta-toolbar .bt-btn.lang-btn,
body #beta-toolbar .bt-btn.learn-lang-btn,
body #beta-toolbar .bt-btn.feedback-btn {
  background: var(--surface-muted);
  color: var(--text-body);
}

/* search.html sets these colours in a style attribute — only !important wins */
#authPrompt {
  background: var(--surface-muted) !important;
  border-color: var(--color-primary) !important;
  color: var(--text-body) !important;
}