/* ============================================================
   Bitfeld — DARK-Theme (Verfeinerungen)
   Subtile Optimierungen des dunklen Default-Designs (css/style.css).

   Selektor-Scope:  :is([data-theme="dark"],
                       html:not([data-theme="light"]))
   Der zweite Zweig deckt den Zustand "kein Theme gesetzt" ab
   (Dark ist der Default) — erst theme.js bzw. das Inline-Skript
   im <head> setzt das data-theme-Attribut. Ein explizit gesetztes
   Light-Theme ist damit automatisch ausgeschlossen.

   Dateireihenfolge: style.css → theme-dark.css → theme-light.css
   (Light gewinnt bei gleicher Spezifität durch die späte Ladung).

   Seit dem Redesign 2026-11 enthält diese Datei nur noch Tokens,
   Fokus/Auswahl und den Theme-Toggle. Komponenten-Styles (Glas,
   Gradient-Borders, Hover) liegen vollständig in style.css.
   ============================================================ */

:is([data-theme="dark"], html:not([data-theme="light"])) {
  color-scheme: dark;

  /* ---------- Tokens: weichere, weniger gesättigte Nachtblau-Töne ----------
     Flächen leicht angehoben und entsättigt → mehr Tiefe (Karte hebt sich
     vom Grund ab) statt gleichmäßiger Schwere. */
  --ink: #06080e;
  --ink-2: #080b12;
  --surface: #080a0f;
  --surface-2: #0a0d14;
  --page: #06080e;
  --paper: #0e1018;
  --paper-hi: #121620;

  --text: #e4e6ea;
  --text-muted: #8a919e;
  --text-faint: #7e8a9e;

  --border: #1a1f28;
  --border-strong: #2a3038;


  /* Weichere, tiefere Schatten (weicher Falloff, weniger Schwärze) */
  --shadow-s: 0 1px 2px rgba(2, 4, 9, 0.28), 0 2px 10px -4px rgba(2, 4, 9, 0.22);
  --shadow-m: 0 2px 6px rgba(2, 4, 9, 0.26), 0 16px 44px -16px rgba(2, 4, 9, 0.58);
  --shadow-l: 0 4px 14px rgba(2, 4, 9, 0.3), 0 36px 80px -28px rgba(2, 4, 9, 0.7);

  /* Sanftere Motion */
  --dur-med: 300ms;

  /* Dezente Scrollbars passend zum Thema */
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

/* ---------- Base: Auswahl & Fokus ---------- */
:is([data-theme="dark"], html:not([data-theme="light"])) ::selection {
  background: rgba(195, 205, 220, 0.24);
  color: #fdf6e8;
}

:is([data-theme="dark"], html:not([data-theme="light"])) :focus-visible {
  outline: 2px solid rgba(195, 205, 220, 0.85);
  outline-offset: 3px;
}

/* ============================================================
   THEME-TOGGLE (Sonne / Mond) — nur Dark-Scope
   Pillenförmig, transparent mit feiner Border, sanfter Hover.
   ============================================================ */
:is([data-theme="dark"], html:not([data-theme="light"])) .theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.45rem 0.95rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    color 160ms var(--ease-out),
    border-color 160ms var(--ease-out),
    background-color 160ms var(--ease-out),
    box-shadow 160ms var(--ease-out);
}
:is([data-theme="dark"], html:not([data-theme="light"])) .theme-toggle:hover {
  color: var(--text);
  border-color: rgba(195, 205, 220, 0.45);
  background: rgba(195, 205, 220, 0.07);
}
:is([data-theme="dark"], html:not([data-theme="light"])) .theme-toggle:active {
  transform: translateY(1px);
}
:is([data-theme="dark"], html:not([data-theme="light"])) .theme-toggle-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--accent);
}

/* ---------- Icon-Sichtbarkeit ----------
   Sonne = Light-Modus, Mond = Dark-Modus (Default).
   Zwei gleichwertige Wege: das Theme-Attribut (CSS) und die
   von theme.js gesetzte .is-active-Klasse (Fallback/Debug). */
.theme-toggle-icon { display: none; }

:is([data-theme="dark"], html:not([data-theme="light"])) .theme-icon-moon,
html:not([data-theme="light"]) .theme-icon-moon,
.theme-icon-moon.is-active { display: block; }

[data-theme="light"] .theme-icon-sun,
.theme-icon-sun.is-active { display: block; }

/* Sanftes Einblenden des jeweils aktiven Icons */
.theme-icon-moon.is-active,
.theme-icon-sun.is-active {
  animation: theme-icon-in 320ms var(--ease-out);
}
@keyframes theme-icon-in {
  from { opacity: 0; transform: rotate(-24deg) scale(0.8); }
  to   { opacity: 1; transform: none; }
}