/*
 * ============================================================
 *  MSP Design System – CSS Custom Properties
 *  Laden als erste Stylesheet-Dependency (vor style.css)
 *
 *  Theme-Switch:
 *    Dark  (Standard) → :root
 *    Hell              → [data-theme="light"] auf <html>
 * ============================================================
 */

/* ──────────────────────────────────────────────
   DARK THEME (Standard / MSP Navy)
────────────────────────────────────────────── */
:root {

  /* Farben und Schrift wie podmanager-all (podmanager-all/style.css) */

  /* Hintergründe */
  /* Dunkel (Farb-Werkzeug, 23.09.2026 15:54): Seite #131313, Kacheln #303030 */
  --clr-bg:           #131313;   /* Seiten-Hintergrund                  */
  --clr-surface:      #303030;   /* Kachel / Karte / Footer / Panel     */
  --clr-art:          #ffffff;   /* Fläche hinter Cover-Bildern         */
  --clr-surface-2:    #1e1e1e;   /* Hover, Eingabefelder, Player-Menü   */
  --clr-surface-3:    #2a2a2a;   /* Hover auf Flächen                   */
  --clr-border:       #000000;
  --clr-border-2:     rgba(255,255,255,0.22);

  /* Akzent */
  --clr-accent:       #1D9E75;   /* Akzent als Fläche (Buttons, aktive Reiter) – je Portal unten */
  --clr-accent-text:  #1D9E75;   /* Akzent als Schrift auf dunklem Grund       */
  --clr-accent-tint:  rgba(29,158,117,.12);  /* dezente Akzent-Hinterlegung   */
  --clr-accent-line:  rgba(29,158,117,.45);  /* Unterstreichung, Fokusring     */
  --clr-accent-dim:   #0F6E56;   /* Hover auf Akzent       (PM --brand-dim) */
  --clr-accent-mmp:   #0065cc;   /* Musik-Portal                            */
  --clr-on-accent:    #ffffff;   /* Text/Icons AUF Akzentfarbe              */

  /* Portal-Farben: mp schwarz/weiß, mmp blau, msp orange (wie im Podmanager) */
  --clr-portal-mp:    #242424;
  --clr-portal-mmp:   #0065cc;
  --clr-portal-msp:   #e65c00;

  /* Text-Hierarchie */
  /* Hell genug für schwarze Kacheln und die graue Seite */
  --clr-text:         #ffffff;   /* Primärer Text        */
  --clr-text-soft:    #b3b3b3;   /* Sekundärer Text      */
  --clr-text-muted:   #b3b3b3;   /* Gedämpfte Labels     */
  --clr-text-dim:     #b3b3b3;   /* Icons, Meta-Infos    */
  --clr-text-faint:   #dcdcd9;   /* Platzierungen o. ä.  */
  --clr-text-ghost:   #c4c4c1;   /* Placeholder / Hints  */

  /* Overlay-Masken (für Hover/Gradient) */
  --clr-overlay-dark: rgba(0,0,0,.85);
  --clr-overlay-mid:  rgba(0,0,0,.40);
  --clr-overlay-soft: rgba(0,0,0,.15);

  /* Player */
  --clr-player-bg:    #121212;
  --clr-player-bdr:   var(--clr-accent);

  /* Schriftart */
  --font-sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ──────────────────────────────────────────────
   LIGHT THEME
   Aktivierung: <html data-theme="light"> (Schalter in der Kopfzeile, header.php)
────────────────────────────────────────────── */
:root { color-scheme: dark; }
html[data-theme="light"] {
  color-scheme: light;

  /* Hintergründe */
  --clr-bg:           #ffffff;
  --clr-surface:      #f8f8f8;
  --clr-art:          #ffffff;
  --clr-surface-2:    #efefed;
  --clr-surface-3:    #e5e5e2;
  --clr-border:       #dddddd;
  --clr-border-2:     rgba(0,0,0,.16);

  /* Portal-Plakette mp bleibt schwarz */
  --clr-portal-mp:    #242424;

  /* Text-Hierarchie */
  --clr-text:         #121212;
  --clr-text-soft:    #3a3a38;
  --clr-text-muted:   #50504c;
  --clr-text-dim:     #62625e;
  --clr-text-faint:   #7a7a75;
  --clr-text-ghost:   #9a9a95;

  /* Overlay-Masken bleiben dunkel: darauf steht weiße Schrift über Bildern */

  /* Player */
  --clr-player-bg:    #ffffff;
}

/* ──────────────────────────────────────────────
   AKZENT JE PORTAL  (<html data-portal="…">, header.php)
   mp: schwarz/weiß wie das meinpodcast.de-Logo, mmp: blau, msp: orange
────────────────────────────────────────────── */
/* Dunkel: Buttons und aktive Flächen weiß mit schwarzer Schrift (auf schwarzen Kacheln sichtbar) */
html[data-portal="mp"] {
  --clr-accent:       #f0f0ef;
  --clr-accent-dim:   #1e1e1e;
  --clr-on-accent:    #303030;   /* Play-Dreieck und Schrift auf den hellen Buttons (Wunsch 25.09.) */
  --clr-accent-text:  #ffffff;
  --clr-accent-tint:  rgba(255,255,255,.16);
  --clr-accent-line:  rgba(255,255,255,.40);
}
html[data-portal="mmp"] {
  --clr-accent:       #0065cc;
  --clr-accent-dim:   #0057b0;
  --clr-on-accent:    #ffffff;
  --clr-accent-text:  #cfe2ff;
  --clr-accent-tint:  rgba(0,101,204,.18);
  --clr-accent-line:  rgba(90,162,236,.45);
}
html[data-portal="msp"] {
  --clr-accent:       #e65c00;
  --clr-accent-dim:   #c24d00;
  --clr-on-accent:    #ffffff;
  --clr-accent-text:  #ffd6b8;
  --clr-accent-tint:  rgba(230,92,0,.18);
  --clr-accent-line:  rgba(255,138,61,.45);
}

/* Hell: Akzent je Portal dunkler, damit Schrift und Flächen auf Weiß lesbar sind */
html[data-theme="light"][data-portal="mp"] {
  --clr-accent:       #121212;
  --clr-accent-dim:   #62625e;
  --clr-on-accent:    #ffffff;
  --clr-accent-text:  #121212;
  --clr-accent-tint:  rgba(0,0,0,.06);
  --clr-accent-line:  rgba(0,0,0,.35);
}
html[data-theme="light"][data-portal="mmp"] {
  --clr-accent-text:  #0059b3;
  --clr-accent-tint:  rgba(0,101,204,.10);
  --clr-accent-line:  rgba(0,89,179,.40);
}
html[data-theme="light"][data-portal="msp"] {
  --clr-accent-text:  #b34700;
  --clr-accent-tint:  rgba(230,92,0,.10);
  --clr-accent-line:  rgba(179,71,0,.40);
}