/* ══════════════════════════════════════════════════════════════════
   MARCHER.DARK — prefers-color-scheme:dark-Mapping fuer marcher.li
   ────────────────────────────────────────────────────────────────
   marcher.li-exklusiv (NICHT ueber sync-tokens.sh an andere Domains verteilt -- tokens.css
   selbst bleibt bewusst ohne globalen prefers-color-scheme-Fallback, siehe dessen Kopfkommentar
   "Kein globaler prefers-color-scheme-Fallback hier"). Geladen auf index.html, legal-notice/ und
   404.html (vorher stand dieser Block nur inline in index.html).

   Ladereihenfolge: dieses Stylesheet muss NACH jedem Inline-<style> stehen, das ein
   unbedingtes (nicht in @media verpacktes) :root definiert -- bei gleicher Selektor-
   Spezifitaet gewinnt sonst das spaeter im Dokument stehende Element unabhaengig davon, ob
   seine Bedingung (hier: der Media Query) zutrifft. index.html bindet diese Datei deshalb erst
   nach seinem eigenen <style>-Block ein.

   Zwei Gruppen von Variablen:
   1. Generische tokens.css-Variablen (--bg/--text/--muted/--border/...), die legal-notice/ und
      404.html direkt verwenden.
   2. Seitenlokale Variablen aus index.html's eigenem <style>-:root (--sec-*/--card/--ink-*/...),
      die es sonst nur dort gaebe -- auf legal-notice/404 wirkungslos, aber harmlos.
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  html { color-scheme: dark; }

  :root {
    /* ── Generische Tokens (legal-notice/, 404.html) ── */
    --bg:           var(--dark-bg);
    --bg-2:         var(--dark-bg-2);
    --surface:      var(--dark-surface);
    --text:         var(--dark-text);
    --text-muted:   var(--dark-text-muted);
    --muted:        var(--dark-text-muted);
    --border:       var(--dark-border);
    --border-dark:  var(--dark-border);

    /* ── Seitenlokale Tokens aus index.html's <style>-:root ── */
    --sec-off:   var(--dark-bg);
    --sec-slate: var(--dark-bg);
    --sec-white: var(--dark-bg-2);
    --card:      var(--dark-surface);
    --line:      var(--dark-border);
    --tag-bg:    var(--dark-surface);
    --ink:       var(--dark-text);
    --ink-body:  var(--dark-text);
    --ink-2:     var(--dark-text-muted);
    --ink-muted: var(--dark-text-muted);
    /* --gold-text: Gold als TEXT auf hellen Flaechen (siehe tokens.css) -- im Dark Mode auf
       allen Flaechen bleibt es das echte --gold. */
    --gold-text: var(--gold);
    --org:       var(--gold-dark); /* Firmenzeile in der Timeline (index.html) */
    --card-shadow: 0 4px 24px rgba(0,0,0,0.25);
    --card-shadow-hover: 0 12px 40px rgba(0,0,0,0.4);
  }
}