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


/* ── 1. CHEMIE-FARBEN: DARK (Standard) ───────────────────────── */
/*   Warme Leuchtwerte — für metallisch-dunklen Hintergrund.     */

:root {
  --chem-gold:   #ffb02e;   /* Elemente, Periodensystem        */
  --chem-proton: #4d8aff;   /* Protonen, Ordnungszahl           */
  --chem-decay:  #ff5577;   /* Kernchemie, radioaktiver Zerfall */
  --chem-radio:  #00e06a;   /* Radioaktivität, Strahlung        */

  /* Kurzaliase — Kompatibilität mit bestehenden Chemieseiten */
  --au: var(--chem-gold);
  --pt: var(--chem-proton);
  --ns: var(--chem-decay);
  --ra: var(--chem-radio);
  --kf: var(--chem-gold);

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


/* ── 2. NEUTRAL-TOKENS: DARK — Metallisch-warmes Schwarz ─────── */

:root {
  --bg:        #0f0e0c;
  --bg-soft:   #161410;
  --panel:     #1c1912;
  --ink:       #e8d8a0;
  --ink-dim:   rgba(232, 216, 160, .48);
  --line:      rgba(200, 175, 100, .12);
  --shadow:    rgba(0, 0, 0, .85);
  --selection: rgba(255, 176, 46, .3);

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

:root[data-theme="dark"] {
  --bg:        #0f0e0c;
  --bg-soft:   #161410;
  --panel:     #1c1912;
  --ink:       #e8d8a0;
  --ink-dim:   rgba(232, 216, 160, .48);
  --line:      rgba(200, 175, 100, .12);
  --shadow:    rgba(0, 0, 0, .85);
  --selection: rgba(255, 176, 46, .3);

  --chem-gold:   #ffb02e;
  --chem-proton: #4d8aff;
  --chem-decay:  #ff5577;
  --chem-radio:  #00e06a;
}


/* ── 3. NEUTRAL-TOKENS: LIGHT — Warmes Pergament ──────────────── */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:        #f7f2e4;
    --bg-soft:   #efe7d2;
    --panel:     #e5dcc0;
    --ink:       #2a2210;
    --ink-dim:   #6b5f3e;
    --line:      #d8caa0;
    --shadow:    rgba(60, 45, 10, .1);
    --selection: rgba(255, 176, 46, .25);
    --dim:       #6b5f3e;

    --chem-gold:   #a86800;
    --chem-proton: #1a5bff;
    --chem-decay:  #c4003a;
    --chem-radio:  #006c30;
  }
}

:root[data-theme="light"] {
  --bg:        #f7f2e4;
  --bg-soft:   #efe7d2;
  --panel:     #e5dcc0;
  --ink:       #2a2210;
  --ink-dim:   #6b5f3e;
  --line:      #d8caa0;
  --shadow:    rgba(60, 45, 10, .1);
  --selection: rgba(255, 176, 46, .25);
  --dim:       #6b5f3e;

  --chem-gold:   #a86800;
  --chem-proton: #1a5bff;
  --chem-decay:  #c4003a;
  --chem-radio:  #006c30;
}


/* ── 4. BODY ─────────────────────────────────────────────────── */
/*   Abweichend von anderen Sektionen: Chemie nutzt durchgängig   */
/*   Mono für Fließtext (Terminal-/Laborjournal-Anmutung),        */
/*   passend zu den bereits bestehenden Chemieseiten.             */

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

/* Metallischer Hintergrund — dezenter Verlauf + gebürstete Textur (Dark) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #0e0d0b 0%, #161410 35%, #1a1710 65%, #0f0e0c 100%);
  z-index: 0;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(180deg,
      transparent 0px, transparent 3px,
      rgba(255,248,220,.018) 3px, rgba(255,248,220,.018) 4px
    ),
    repeating-linear-gradient(92deg,
      transparent 0px, transparent 8px,
      rgba(255,248,220,.008) 8px, rgba(255,248,220,.008) 9px
    );
  z-index: 0;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body::before,
  :root:not([data-theme="dark"]) body::after { display: none; }
}
:root[data-theme="light"] body::before,
:root[data-theme="light"] body::after { display: none; }


/* ── 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="a"] .blog-num::before { background: var(--chem-gold); }
.blog-entry[data-cat="p"] .blog-num::before { background: var(--chem-proton); }
.blog-entry[data-cat="n"] .blog-num::before { background: var(--chem-decay); }
.blog-entry[data-cat="r"] .blog-num::before { background: var(--chem-radio); }
.blog-entry[data-cat="k"] .blog-num::before { background: var(--chem-decay); }


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

.level-dot.on {
  background: var(--chem-gold);
}


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

.progress-fill {
  background: linear-gradient(90deg,
    var(--chem-gold),
    var(--chem-proton),
    var(--chem-decay),
    var(--chem-radio));
}


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

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


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

.site-header {
  --nav-bg:      linear-gradient(90deg, #131109 0%, #0e0d0b 50%, #131109 100%);
  --nav-ink:     var(--ink);
  --nav-ink-dim: var(--ink-dim);
  --nav-line:    var(--line);
}

/* Nav-Buttons bleiben unangetastet — Styling kommt ausschließlich aus nav.css */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .site-header { --nav-bg: var(--bg); }
}

:root[data-theme="light"] .site-header { --nav-bg: var(--bg); }

/* ── SVG-Theme-Utilities ─────────────────────────────────── */
.sketch-label { font-family: 'IBM Plex Mono','Courier New',monospace; font-size: 9px; fill: rgba(200,185,140,.5); }
.sketch-label-sm { font-family: 'IBM Plex Mono','Courier New',monospace; font-size: 7px; fill: rgba(200,185,140,.4); }
@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); }