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


/* ── 1. DNA-BASISFARBEN ──────────────────────────────────────── */

:root {
  --gene-a:        #0047ff;   /* Adenin  — kräftiges Blau  */
  --gene-t:        #e8193c;   /* Thymin  — kräftiges Rot   */
  --gene-g:        #00963d;   /* Guanin  — kräftiges Grün  */
  --gene-c:        #d46000;   /* Cytosin — kräftiges Orange*/
  --gene-pur:      #7c3aed;   /* Epigenetik / Histonmod.   */
  --gene-backbone: #717a88;   /* Zucker-Phosphat-Rückgrat  */

  /* Kurzaliase — Kompatibilität mit bestehenden Seiten */
  --a:        var(--gene-a);
  --t:        var(--gene-t);
  --g:        var(--gene-g);
  --c:        var(--gene-c);
  --pur:      var(--gene-pur);
  --backbone: var(--gene-backbone);

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


/* ── 2. NEUTRAL-TOKENS: LIGHT (Genetik-Standard) ────────────── */
/*   Überschreibt die Dark-Defaults aus ../theme.css              */

:root {
  --bg:        #ffffff;
  --bg-soft:   #f4f6f9;
  --panel:     #eef1f5;
  --ink:       #14181f;
  --ink-dim:   #636c7a;
  --line:      #dfe3e9;
  --shadow:    rgba(20, 24, 31, .1);
  --selection: rgba(0, 71, 255, .18);
}

:root[data-theme="light"] {
  --bg:        #ffffff;
  --bg-soft:   #f4f6f9;
  --panel:     #eef1f5;
  --ink:       #14181f;
  --ink-dim:   #636c7a;
  --line:      #dfe3e9;
  --shadow:    rgba(20, 24, 31, .1);
  --selection: rgba(0, 71, 255, .18);

  --gene-a:        #0047ff;
  --gene-t:        #e8193c;
  --gene-g:        #00963d;
  --gene-c:        #d46000;
  --gene-pur:      #7c3aed;
  --gene-backbone: #717a88;
}


/* ── 3. NEUTRAL-TOKENS: DARK — Lab-Atmosphäre ───────────────── */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0f1114;
    --bg-soft:   #151820;
    --panel:     #1a1d24;
    --ink:       #e2e8f2;
    --ink-dim:   rgba(226, 232, 242, .48);
    --line:      rgba(255, 255, 255, .08);
    --shadow:    rgba(0, 0, 0, .5);
    --selection: rgba(77, 138, 255, .3);

    --gene-a:        #4d8aff;
    --gene-t:        #ff5577;
    --gene-g:        #00e06a;
    --gene-c:        #ffb02e;
    --gene-pur:      #a855f7;
    --gene-backbone: #8892a4;
  }
}

:root[data-theme="dark"] {
  --bg:        #0f1114;
  --bg-soft:   #151820;
  --panel:     #1a1d24;
  --ink:       #e2e8f2;
  --ink-dim:   rgba(226, 232, 242, .48);
  --line:      rgba(255, 255, 255, .08);
  --shadow:    rgba(0, 0, 0, .5);
  --selection: rgba(77, 138, 255, .3);

  --gene-a:        #4d8aff;
  --gene-t:        #ff5577;
  --gene-g:        #00e06a;
  --gene-c:        #ffb02e;
  --gene-pur:      #a855f7;
  --gene-backbone: #8892a4;
}


/* ── 4. BODY: IBM Plex Sans als Primärschrift ────────────────── */

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


/* ── 5. BLOG-SKETCH-HINTERGRUND ──────────────────────────────── */
/*   Light: sichtbares Soft-Grau. Dark: fast transparent.        */

.blog-sketch {
  background: var(--bg-soft);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .blog-sketch {
    background: rgba(255, 255, 255, .025);
  }
}

:root[data-theme="dark"] .blog-sketch {
  background: rgba(255, 255, 255, .025);
}


/* ── 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(--gene-backbone);
  flex-shrink: 0;
}

.blog-entry[data-cat="s"] .blog-num::before { background: var(--gene-a);   }
.blog-entry[data-cat="r"] .blog-num::before { background: var(--gene-a);   }
.blog-entry[data-cat="p"] .blog-num::before { background: var(--gene-t);   }
.blog-entry[data-cat="d"] .blog-num::before { background: var(--gene-t);   }
.blog-entry[data-cat="m"] .blog-num::before { background: var(--gene-g);   }
.blog-entry[data-cat="t"] .blog-num::before { background: var(--gene-c);   }
.blog-entry[data-cat="e"] .blog-num::before { background: var(--gene-pur); }


/* ── 7. LEVEL-DOTS: RÜCKGRAT-FARBE ──────────────────────────── */

.level-dot.on {
  background: var(--gene-backbone);
}


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

.progress-fill {
  background: linear-gradient(90deg,
    var(--gene-a),
    var(--gene-t),
    var(--gene-g),
    var(--gene-c));
}


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

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


/* ── 10. NAV: Theme-Tokens auf .site-header setzen ──────────── */

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

/* Genetik-Button: immer weiß mit dunkler Schrift */
.nav-top--genetik       { background: #fff; border-color: #c8cdd8; color: #14181f; }
.nav-top--genetik:hover { background: #f0f0f0; border-color: #a0a8b4; color: #14181f; }