/* Thema Mediathek „gemütlich“ (abgenommen im Entwurf /entwurf/): fast schwarz mit einem Hauch Wärme, Bernstein,
   Fraunces für Titel, Manrope für Text. Hell: warmes Papierweiß. Hell/Dunkel über data-mode (ui/modus.js).
   Neue Farbnamen plus Abbildung der alten Namen aus style.css, damit bestehende Regeln sofort das Thema nutzen. */
:root {
  --bg: #0e0d0d; --surface: #181716; --surface-2: #232120; --sheet-bg: #141312;
  --line: rgba(255, 244, 232, .07); --line-strong: rgba(255, 244, 232, .18);
  --text: #f2ede6; --muted: #a39b92; --dim: #756e66; --accent: #f2a14a; --on-accent: #231405;
  --ok: #8fbf7a; --warn: #e8b04a; --bad: #e5735f; --info: #8fb4e0;
  --track: rgba(255, 244, 232, .1); --glow: rgba(242, 161, 74, .06);
  --toast-bg: #f2ede6; --toast-text: #0e0d0d;
  --display: "Fraunces", Georgia, serif; --num: "Manrope", "Segoe UI", system-ui, sans-serif;
  /* alte Namen */
  --bg-deep: #0a0909; --surface-3: #2c2a28;
  --soft: rgba(255, 244, 232, .05); --soft-2: rgba(255, 244, 232, .085); --soft-3: rgba(255, 244, 232, .13);
  --accent-strong: #f59433; --accent-soft: rgba(242, 161, 74, .14); --danger: var(--bad);
  --scroll: #3a3633; --scroll-hover: #4b4642;
  color-scheme: dark;
}
:root[data-mode="light"] {
  --bg: #f6f3ef; --surface: #ffffff; --surface-2: #efeae4; --sheet-bg: #fbf9f6;
  --line: rgba(40, 28, 16, .09); --line-strong: rgba(40, 28, 16, .18);
  --text: #1d1915; --muted: #6f665d; --dim: #948a80; --accent: #c8741c; --on-accent: #ffffff;
  --ok: #3f8a3a; --warn: #b77b0a; --bad: #c4442f; --info: #2f6fb3;
  --track: rgba(40, 28, 16, .1); --glow: rgba(200, 116, 28, .07);
  --toast-bg: #1d1915; --toast-text: #f6f3ef;
  --bg-deep: #ece7e1; --surface-3: #e6e0d8;
  --soft: rgba(40, 28, 16, .045); --soft-2: rgba(40, 28, 16, .075); --soft-3: rgba(40, 28, 16, .12);
  --accent-strong: #b2640f; --accent-soft: rgba(200, 116, 28, .13);
  --scroll: #cfc7bd; --scroll-hover: #b9b0a5;
  color-scheme: light;
}
/* Fraunces weich gezeichnet, wie im Entwurf */
.brand, .page-head h1, .dlg-title, .finder-head h2, .persona b, .pc-head h2, .row h2, .week-day h2, .hero h1, .pv-title { font-variation-settings: "SOFT" 100; }

/* Modi (data-area auf <html>, beim Fenster eines Titels dessen Art). Seit 05.11.2026 alle drei auf demselben warmen Braun wie Anime,
   nur der Akzent unterscheidet sich, blass statt leuchtend (Koralle und Kinorot wirkten wie Neonschilder):
   Anime Bernstein, Serien Ton (gedecktes Terrakotta), Filme Altrosé. Filme behalten Gold für Noten und einen kaum sichtbaren Schein oben */
:root { --gold: #d9bb82; --area-bg: none; }
:root[data-area="serie"] { --accent: #d89c7f; --accent-strong: #cc8a6b; --accent-soft: rgba(216, 156, 127, .14); --on-accent: #2a160c; --glow: rgba(216, 156, 127, .06); }
:root[data-area="film"] { --accent: #cf9497; --accent-strong: #c28185; --accent-soft: rgba(207, 148, 151, .14); --on-accent: #2a1214; --glow: rgba(207, 148, 151, .06);
  --area-bg: radial-gradient(1200px 520px at 50% -180px, rgba(207, 148, 151, .06), transparent 70%); }
:root[data-mode="light"] { --gold: #94733a; }
:root[data-mode="light"][data-area="serie"] { --accent: #a8654a; --accent-strong: #97563c; --accent-soft: rgba(168, 101, 74, .12); --on-accent: #ffffff; --glow: rgba(168, 101, 74, .06); }
:root[data-mode="light"][data-area="film"] { --accent: #9c5a60; --accent-strong: #8a4b51; --accent-soft: rgba(156, 90, 96, .12); --on-accent: #ffffff; --glow: rgba(156, 90, 96, .06);
  --area-bg: radial-gradient(1200px 520px at 50% -180px, rgba(156, 90, 96, .05), transparent 70%); }

/* Werte für Bausteine aus ui/basis.css und der Mediathek */
:root { --desc: #d6cec4; --grain: .035; --display-w: 600; --display-ls: -.01em; --r: 20px; --r-l: 28px; --r-pill: 999px; --tab-on: var(--text); --tab-on-text: var(--bg);
  --on-user: #1b1712; --on-ok: #10180c; --scrim: rgba(0, 0, 0, .55); --shadow-pop: 0 30px 80px rgba(0, 0, 0, .5); }
:root[data-mode="light"] { --desc: #3b342e; --grain: .02; --on-ok: #ffffff; --scrim: rgba(20, 14, 8, .45); --shadow-pop: 0 30px 80px rgba(40, 28, 16, .25); }