/* ============================================================
   advent.zentonic.org — Theme-Schicht über zentonic26 (Tenant-Issue #2)
   ------------------------------------------------------------
   Geladen NACH style.css (base.html.j2, theme-hook). style.css bleibt
   unverändert; hier stehen nur
     1. Custom-Property-Overrides: :root = hell (Standard, 21b),
        [data-theme="dark"] = Kerzenlicht-Dunkel (21a),
     2. wenige Komponenten-Overrides für Stellen, an denen style.css
        Farben hart codiert statt Tokens zu nutzen (jeweils markiert),
     3. der Theme-Umschalter im Header.
   Farbquelle: Show-Cover (Pixel-Art-Weihnachtszimmer, roter Schriftzug)
   und Altseite (Castopod, theme-color #F24562).
   Token-NAMEN bleiben (Schnittstelle zu style.css), die Rollen:
     --blue*    = Akzent   (Crimson: Wortmarke, Links, Play)
     --green*   = Struktur (Tannengrün: Prompt, Sektionen, Feed)
     --cyan     = Zeitmarken/Tags (hell Ziegelrot, dunkel Gold)
     --amber    = Gold-Highlight
     --magenta  = LIVE (Crimson), --violet = Mastodon-Kante (Ziegel)
   Kontrastbelege: design/tokens.md (Abschnitt advent).
   ============================================================ */

/* ---------- HELL (Standard) ----------------------------------------- */
:root {
  color-scheme: light;

  /* Rohpalette (Altseite + Cover), modusunabhängig */
  --crimson: #F24562;
  --fir:     #12522C;
  --gold:    #E8A568;
  --brick:   #B84637;
  --wood:    #5D221C;
  --ink:     #1B1515;
  --wall:    #DAEAE0;

  /* surfaces — Wand, Papier, helles Holz */
  --bg-void:   #DAEAE0;
  --bg-page:   #F4F8F4;
  --bg-panel:  #FFFCF6;
  --bg-raised: #F5EBDD;
  --bg-inset:  #EADFCD;

  /* foreground — Tinte und Holz */
  --fg-1: #1B1515;
  --fg-2: #4A2420;
  --fg-3: #6A4B40;
  --fg-4: #75604F;

  /* borders — Holz */
  --line-1: #E2D6C3;
  --line-2: #CDB89B;
  --line-3: #A2805F;

  /* Akzent = Crimson; als Füllfläche trägt er --bg-void als Text
     (style.css: Play-Buttons, Skip-Link) — Kontrast 5.53:1 */
  --blue:        #B3122F;
  --blue-bright: #8E0E25;
  --blue-dim:    color-mix(in srgb, #B3122F 40%, transparent);
  --blue-glow:   rgba(179,18,47,.25);

  --green:       #12522C;
  --green-bright:#0B3D20;
  --green-glow:  rgba(18,82,44,.22);

  --amber:       #85561A;
  --amber-glow:  rgba(232,165,104,.45);

  --magenta:     #B3122F;
  --magenta-glow:rgba(179,18,47,.30);

  --cyan:        #94382B;
  --cyan-glow:   rgba(184,70,55,.30);

  --violet:      #8E3528;
  --violet-glow: rgba(184,70,55,.30);

  --red:         #B84637;

  /* elevation — hell: weicher Holzschatten statt Neon-Glow */
  --shadow-panel: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 24px -14px rgba(93,34,28,.35);
  --glow-blue:    0 0 0 1px color-mix(in srgb, var(--blue) 35%, transparent), 0 8px 20px -8px var(--blue-glow);
  --glow-green:   0 0 0 1px color-mix(in srgb, var(--green) 35%, transparent), 0 8px 20px -8px var(--green-glow);
  --glow-magenta: 0 0 0 1px color-mix(in srgb, var(--magenta) 35%, transparent), 0 8px 20px -8px var(--magenta-glow);
  --glow-text-blue:  none;
  --glow-text-green: none;
  --scanline: none;

  /* NEU (nur theme.css): Werte für die Komponenten-Overrides unten */
  --th-selection:   rgba(232,165,104,.45);
  --th-hero-glow:   radial-gradient(900px 360px at 18% -10%, rgba(232,165,104,.30), transparent 60%);
  --th-hero-edge:   var(--wood);
  --th-ph-stripe-a: #12522C;
  --th-ph-stripe-b: #0E4424;
  --th-ph-nr:       #FFF8F0;
  --th-avatar-grad: radial-gradient(circle at 30% 30%, #FFFCF6, #E8D5BC);
  --th-backdrop:    rgba(27,21,21,.82);
  --th-overlay-btn: rgba(255,252,246,.88);
  --th-shadow-pop:  0 -10px 28px -14px rgba(93,34,28,.45);
  --th-star:        #85561A;
}

/* ---------- DUNKEL: Kerzenlicht ------------------------------------- */
/* Fast-Schwarz mit Gold-/Crimson-Glühen statt Neon. Gesetzt als
   <html data-theme="dark"> vom Inline-Snippet im <head> (vor dem ersten
   Paint) bzw. von js/theme-toggle.js. Gleiche Spezifität wie :root,
   steht später → gewinnt. */
[data-theme="dark"] {
  color-scheme: dark;

  --bg-void:   #120D0D;
  --bg-page:   #1B1515;
  --bg-panel:  #241A19;
  --bg-raised: #302220;
  --bg-inset:  #150F0F;

  --fg-1: #F3E9DC;
  --fg-2: #D2BFAE;
  --fg-3: #A99282;
  --fg-4: #94807A;

  --line-1: #33262A;
  --line-2: #4A3631;
  --line-3: #6E5046;

  /* #F24562 (Altseite) ist als Text auf --bg-raised zu schwach (4.22:1),
     daher eine Stufe heller; Glow und Kanten bleiben #F24562 */
  --blue:        #FF6680;
  --blue-bright: #FF8BA0;
  --blue-dim:    color-mix(in srgb, #F24562 45%, transparent);
  --blue-glow:   rgba(242,69,98,.40);

  --green:       #7FC79B;
  --green-bright:#A3DDB8;
  --green-glow:  rgba(127,199,155,.30);

  --amber:       #F0C27E;
  --amber-glow:  rgba(232,165,104,.40);

  --magenta:     #FF6680;
  --magenta-glow:rgba(242,69,98,.40);

  --cyan:        #E8A568;
  --cyan-glow:   rgba(232,165,104,.40);

  --violet:      #E0806F;
  --violet-glow: rgba(224,128,111,.35);

  --red:         #B84637;

  --shadow-panel: 0 1px 0 rgba(255,255,255,.02) inset, 0 12px 32px -12px rgba(0,0,0,.8);
  --glow-blue:    0 0 0 1px rgba(242,69,98,.35), 0 0 18px -2px var(--blue-glow);
  --glow-green:   0 0 0 1px rgba(127,199,155,.30), 0 0 18px -2px var(--green-glow);
  --glow-magenta: 0 0 0 1px rgba(242,69,98,.35), 0 0 18px -2px var(--magenta-glow);
  /* Kerzenlicht: Text glimmt golden, nicht neonblau */
  --glow-text-blue:  0 0 12px rgba(232,165,104,.35);
  --glow-text-green: 0 0 10px var(--green-glow);
  --scanline: none;

  --th-selection:   rgba(232,165,104,.35);
  --th-hero-glow:   radial-gradient(900px 360px at 18% -10%, rgba(232,165,104,.20), transparent 60%),
                    radial-gradient(600px 300px at 90% 120%, rgba(242,69,98,.14), transparent 60%);
  --th-hero-edge:   var(--wood);
  --th-ph-stripe-a: #173823;
  --th-ph-stripe-b: #112B1B;
  --th-ph-nr:       #E8A568;
  --th-avatar-grad: radial-gradient(circle at 30% 30%, #5D221C, #241A19);
  --th-backdrop:    rgba(18,13,13,.9);
  --th-overlay-btn: rgba(21,15,15,.8);
  --th-shadow-pop:  0 -12px 32px -12px rgba(0,0,0,.8);
  --th-star:        #E8A568;
}

/* ---------- KOMPONENTEN-OVERRIDES ----------------------------------- */
/* Jeder Block ersetzt einen Hartwert aus style.css (Kandidat für ein
   Token in der künftigen Publisher-Theme-Schnittstelle). */

/* style.css ::selection — rgba(61,139,255,.30) */
::selection { background: var(--th-selection); }

/* style.css .zt-hero — blaues radial-gradient + 1px-Linie;
   advent: Kerzenschein + Holzleiste wie die Fußbodenkante im Cover */
.zt-hero {
  border-bottom: 4px solid var(--th-hero-edge);
  background: var(--th-hero-glow), var(--bg-void);
}

/* style.css .zt-hero__wordmark — fg-1 + blauer text-shadow;
   advent: Crimson wie der Cover-Schriftzug „Atzwentzkalender" */
.zt-hero__wordmark {
  color: var(--blue);
  text-shadow: var(--glow-text-blue);
}

/* advent-Detail: Stern vor dem Logo-Namen (Span ist aria-hidden) */
.zt-logo__name::before {
  content: "\2605\00a0";
  color: var(--th-star);
  font-weight: 400;
}

/* style.css Platzhalter-Cover — blaue Streifen #11304f/#0c2238;
   advent: Tannengrün-Streifen, Nummer creme/gold */
.zt-ep-card__cover--ph,
.zt-ep-head__cover--ph {
  background: repeating-linear-gradient(45deg, var(--th-ph-stripe-a) 0 8px, var(--th-ph-stripe-b) 8px 16px);
}
.zt-ep-card__nr-bg,
.zt-ep-head__cover-nr {
  color: var(--th-ph-nr);
  text-shadow: 0 0 20px var(--amber-glow);
}

/* style.css Badges — rgba()-Tönungen der Neon-Farben */
.zt-ep-nr,
.zt-badge         { background: color-mix(in srgb, var(--blue) 10%, transparent); }
.zt-badge--amber  { border-color: color-mix(in srgb, var(--amber) 35%, transparent);
                    background:   color-mix(in srgb, var(--amber) 10%, transparent); }
.zt-badge--green  { border-color: color-mix(in srgb, var(--green) 35%, transparent);
                    background:   color-mix(in srgb, var(--green) 8%, transparent); }
.zt-badge--magenta{ border-color: color-mix(in srgb, var(--magenta) 35%, transparent);
                    background:   color-mix(in srgb, var(--magenta) 8%, transparent); }
.zt-badge--cyan   { border-color: color-mix(in srgb, var(--cyan) 30%, transparent);
                    background:   color-mix(in srgb, var(--cyan) 7%, transparent); }

/* style.css Initial-Avatare — Gradient #2a4a6e/#0c1828 */
.zt-chip__initial,
.zt-speaker__initial { background: var(--th-avatar-grad); }

/* style.css Lightbox — Backdrop/Close-Button rgba(6,5,15)/(8,6,18) */
.zt-lightbox::backdrop { background: var(--th-backdrop); }
.zt-lightbox__close    { background: var(--th-overlay-btn); }

/* style.css Sticky-Player/Chat-Panel — Schatten rgba(0,0,0,.8) */
.zt-sticky-player,
.zt-chat-panel { box-shadow: var(--th-shadow-pop); }

/* ---------- THEME-UMSCHALTER (Header) ------------------------------- */
/* Ohne JS bleibt der Button hidden (Seite hell). Glyph zeigt den Modus,
   in den man wechselt: ☾ im Hellen, ☀ im Dunkeln (U+FE0E = Textform). */
.zt-theme-toggle {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1;
  color: var(--fg-2);
  width: 2.1em;
  height: 2.1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-1);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.zt-theme-toggle[hidden] { display: none; }
.zt-theme-toggle:hover,
.zt-theme-toggle:focus-visible {
  color: var(--amber);
  border-color: var(--amber);
  box-shadow: 0 0 10px var(--amber-glow);
  outline: none;
}
.zt-theme-toggle::before                  { content: "\263E\FE0E"; }
[data-theme="dark"] .zt-theme-toggle::before { content: "\2600\FE0E"; }

/* Header hat durch den Umschalter ein Element mehr: auf schmalen
   Bildschirmen darf „⤓ feed“ nicht umbrechen, Unterzeile weicht */
.zt-nav__feed,
.zt-theme-toggle { white-space: nowrap; flex-shrink: 0; }
.zt-nav { gap: 6px; }
@media (max-width: 479px) {
  .zt-header__inner { gap: 10px; }
  .zt-logo__slash { display: none; }
}