/* ================================================================
   physik/theme.css — Teilchenphysik Design-Tokens
   Erweitert: ../theme.css (muss vorher eingebunden sein)
   Setzt: Partikelfarben, Dark/Light-Hintergründe, Komponent-Overrides
   Einbinden:
     <link rel="stylesheet" href="../theme.css">
     <link rel="stylesheet" href="theme.css">
   ================================================================ */


/* ── 1. PARTIKELFARBEN: DARK (Standard) ──────────────────────── */
/*   Helle Leuchtwerte — für schwarzen/dunklen Hintergrund.      */

:root {
  --phys-q:        #4d8aff;   /* Quarks      — Blau              */
  --phys-l:        #ff5577;   /* Leptonen    — Rot               */
  --phys-b:        #00e06a;   /* Bosonen     — Grün              */
  --phys-h:        #ffb02e;   /* Higgs       — Bernstein         */

  /* Kurzaliase — Kompatibilität mit bestehenden Physikseiten */
  --q:   var(--phys-q);
  --l:   var(--phys-l);
  --b:   var(--phys-b);
  --h:   var(--phys-h);

  /* Font-Aliase */
  --mono: var(--font-display);
  --sans: var(--font-body);
}


/* ── 2. NEUTRAL-TOKENS: DARK — Quantenfeldlinien-Ästhetik ───── */
/*   Überschreibt ../theme.css: Physik nutzt reines Schwarz.     */

:root {
  --bg:        #000000;
  --bg-soft:   #060810;
  --panel:     #0d1019;
  --ink:       #eef2ff;
  --ink-dim:   rgba(238, 242, 255, .42);
  --line:      rgba(255, 255, 255, .10);
  --shadow:    rgba(0, 0, 0, .85);
  --selection: rgba(77, 138, 255, .32);

  /* Alias für bestehende Seiten (var(--dim) → var(--ink-dim)) */
  --dim: var(--ink-dim);
}

:root[data-theme="dark"] {
  --bg:        #000000;
  --bg-soft:   #060810;
  --panel:     #0d1019;
  --ink:       #eef2ff;
  --ink-dim:   rgba(238, 242, 255, .42);
  --line:      rgba(255, 255, 255, .10);
  --shadow:    rgba(0, 0, 0, .85);
  --selection: rgba(77, 138, 255, .32);

  --phys-q:    #4d8aff;
  --phys-l:    #ff5577;
  --phys-b:    #00e06a;
  --phys-h:    #ffb02e;
}


/* ── 3. NEUTRAL-TOKENS: LIGHT — Kühles Physik-Weiß ──────────── */
/*   Blau-getöntes Weiß — sauberes Lehrbuch-Flair.               */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:        #f5f7fc;
    --bg-soft:   #eaeff8;
    --panel:     #dde4f0;
    --ink:       #0b0e1c;
    --ink-dim:   #4a5272;
    --line:      #c4cde0;
    --shadow:    rgba(11, 14, 28, .08);
    --selection: rgba(77, 138, 255, .18);
    --dim:       #4a5272;

    --phys-q:    #1a5bff;
    --phys-l:    #d4003e;
    --phys-b:    #006c30;
    --phys-h:    #8a5200;
  }
}

:root[data-theme="light"] {
  --bg:        #f5f7fc;
  --bg-soft:   #eaeff8;
  --panel:     #dde4f0;
  --ink:       #0b0e1c;
  --ink-dim:   #4a5272;
  --line:      #c4cde0;
  --shadow:    rgba(11, 14, 28, .08);
  --selection: rgba(77, 138, 255, .18);
  --dim:       #4a5272;

  --phys-q:    #1a5bff;
  --phys-l:    #d4003e;
  --phys-b:    #006c30;
  --phys-h:    #8a5200;
}


/* ── 4. BODY ─────────────────────────────────────────────────── */

body {
  font-family: var(--font-body);
}


/* ── 5. BLOG-SKETCH-HINTERGRUND ──────────────────────────────── */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .blog-sketch {
    background: var(--bg-soft);
  }
}

:root[data-theme="light"] .blog-sketch {
  background: var(--bg-soft);
}


/* ── 6. BLOG-NUM: KATEGORIE-DOT ──────────────────────────────── */

.blog-num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.blog-num::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-dim);
  flex-shrink: 0;
}

.blog-entry[data-cat="q"] .blog-num::before { background: var(--phys-q); }
.blog-entry[data-cat="l"] .blog-num::before { background: var(--phys-l); }
.blog-entry[data-cat="b"] .blog-num::before { background: var(--phys-b); }
.blog-entry[data-cat="h"] .blog-num::before { background: var(--phys-h); }


/* ── 7. LEVEL-DOTS ───────────────────────────────────────────── */

.level-dot.on {
  background: var(--phys-q);
}


/* ── 8. PROGRESS-FILL: PARTIKEL-GRADIENT ────────────────────── */

.progress-fill {
  background: linear-gradient(90deg,
    var(--phys-q),
    var(--phys-l),
    var(--phys-b),
    var(--phys-h));
}


/* ── 9. SELECTION ────────────────────────────────────────────── */

::selection {
  background: var(--selection);
  color: var(--ink);
}


/* ── 10. NAV: Dark-Standard & Light-Override ─────────────────── */

.site-header {
  --nav-bg:      rgba(0, 0, 0, .88);
  --nav-ink:     var(--ink);
  --nav-ink-dim: var(--ink-dim);
  --nav-line:    var(--line);
}

@media (max-width: 849px) {
  .site-header { --nav-bg: rgba(0, 0, 0, .97); }
}

/* Light: Nav folgt dem Theme, Physik-Button bleibt dunkel */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .site-header { --nav-bg: var(--bg); }
  :root:not([data-theme="dark"]) .nav-top--physics { background: #0b0e1c; border-color: #1e2535; color: #eef2ff; }
  :root:not([data-theme="dark"]) .nav-top--physics:hover { background: #161a2e; border-color: #2e3a56; color: #eef2ff; }
}

:root[data-theme="light"] .site-header { --nav-bg: var(--bg); }
:root[data-theme="light"] .nav-top--physics { background: #0b0e1c; border-color: #1e2535; color: #eef2ff; }
:root[data-theme="light"] .nav-top--physics:hover { background: #161a2e; border-color: #2e3a56; color: #eef2ff; }

/* ── SVG-Theme-Utilities ─────────────────────────────────── */
.sketch-label { font-family: 'IBM Plex Mono','Courier New',monospace; font-size: 9px; fill: rgba(255,255,255,.45); }
.sketch-label-sm { font-family: 'IBM Plex Mono','Courier New',monospace; font-size: 7px; fill: rgba(255,255,255,.35); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .sketch-label,
  :root:not([data-theme="dark"]) .sketch-label-sm,
  :root:not([data-theme="dark"]) .sv-dim { fill: var(--ink-dim); }
  :root:not([data-theme="dark"]) .sv-guide { stroke: var(--line); }
}
:root[data-theme="light"] .sketch-label,
:root[data-theme="light"] .sketch-label-sm,
:root[data-theme="light"] .sv-dim { fill: var(--ink-dim); }
:root[data-theme="light"] .sv-guide { stroke: var(--line); }