/* ================================================================
   astronomie/theme.css — Kosmologie & Deep Space Design-Tokens
   Erweitert: ../theme.css (muss vorher eingebunden sein)
   Setzt: Astro-Farben, Dark/Light-Hintergründe, Komponent-Overrides
   Einbinden:
     <link rel="stylesheet" href="../theme.css">
     <link rel="stylesheet" href="theme.css">
   ================================================================ */


/* ── 1. ASTRO-FARBEN: DARK (Standard) ────────────────────────── */
/*   Leuchtend — für den schwarzen Deep-Space-Hintergrund.        */

:root {
  --astro-star:   #f5c518;   /* Sterne / Sonnensystem    — Gold   */
  --astro-galaxy: #a855f7;   /* Galaxien / Kosmologie    — Violett */
  --astro-nebula: #2dd4bf;   /* Nebel / Kosmische Körper — Türkis */
  --astro-planet: #fb923c;   /* Planeten / Exoplaneten   — Orange  */

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


/* ── 2. NEUTRAL-TOKENS: DARK — Deep Space ────────────────────── */
/*   Überschreibt ../theme.css: Astronomie nutzt tiefstes Nacht.  */

:root {
  --bg:        #03050f;
  --bg-soft:   #060a1a;
  --panel:     #0c1226;
  --ink:       #dde4f0;
  --ink-dim:   rgba(221, 228, 240, .38);
  --line:      rgba(255, 255, 255, .07);
  --shadow:    rgba(0, 0, 0, .9);
  --selection: rgba(168, 85, 247, .32);
}

:root[data-theme="dark"] {
  --bg:        #03050f;
  --bg-soft:   #060a1a;
  --panel:     #0c1226;
  --ink:       #dde4f0;
  --ink-dim:   rgba(221, 228, 240, .38);
  --line:      rgba(255, 255, 255, .07);
  --shadow:    rgba(0, 0, 0, .9);
  --selection: rgba(168, 85, 247, .32);

  --astro-star:   #f5c518;
  --astro-galaxy: #a855f7;
  --astro-nebula: #2dd4bf;
  --astro-planet: #fb923c;
}


/* ── 3. NEUTRAL-TOKENS: LIGHT — Klarer Taghimmel ─────────────── */
/*   Helles Azure — Tagbeobachtung, Lehrbuch-Atmosphäre.          */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:        #f0f6ff;
    --bg-soft:   #e4effe;
    --panel:     #d6e8fc;
    --ink:       #0a1628;
    --ink-dim:   #3a5280;
    --line:      #bcd2f0;
    --shadow:    rgba(10, 22, 40, .08);
    --selection: rgba(168, 85, 247, .18);

    --astro-star:   #a86800;
    --astro-galaxy: #7200c9;
    --astro-nebula: #007a6e;
    --astro-planet: #c44000;
  }
}

:root[data-theme="light"] {
  --bg:        #f0f6ff;
  --bg-soft:   #e4effe;
  --panel:     #d6e8fc;
  --ink:       #0a1628;
  --ink-dim:   #3a5280;
  --line:      #bcd2f0;
  --shadow:    rgba(10, 22, 40, .08);
  --selection: rgba(168, 85, 247, .18);

  --astro-star:   #a86800;
  --astro-galaxy: #7200c9;
  --astro-nebula: #007a6e;
  --astro-planet: #c44000;
}


/* ── 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="s"] .blog-num::before { background: var(--astro-star);   }
.blog-entry[data-cat="g"] .blog-num::before { background: var(--astro-galaxy); }
.blog-entry[data-cat="n"] .blog-num::before { background: var(--astro-nebula); }
.blog-entry[data-cat="p"] .blog-num::before { background: var(--astro-planet); }


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

.level-dot.on {
  background: var(--astro-star);
}


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

.progress-fill {
  background: linear-gradient(90deg,
    var(--astro-star),
    var(--astro-galaxy),
    var(--astro-nebula),
    var(--astro-planet));
}


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

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


/* ── 10. NAV ─────────────────────────────────────────────────── */

.site-header {
  --nav-bg:      rgba(3, 5, 15, .92);
  --nav-ink:     var(--ink);
  --nav-ink-dim: var(--ink-dim);
  --nav-line:    var(--line);
}

@media (max-width: 849px) {
  .site-header { --nav-bg: rgba(3, 5, 15, .98); }
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .site-header { --nav-bg: var(--bg); }
  :root:not([data-theme="dark"]) .nav-top--astronomy {
    background: #0a1628;
    border-color: #1a2e52;
    color: #dde4f0;
  }
  :root:not([data-theme="dark"]) .nav-top--astronomy:hover {
    background: #162040;
    border-color: #2a4070;
    color: #dde4f0;
  }
}

:root[data-theme="light"] .site-header { --nav-bg: var(--bg); }
:root[data-theme="light"] .nav-top--astronomy {
  background: #0a1628;
  border-color: #1a2e52;
  color: #dde4f0;
}
:root[data-theme="light"] .nav-top--astronomy:hover {
  background: #162040;
  border-color: #2a4070;
  color: #dde4f0;
}


/* ── 11. BUTTONS ─────────────────────────────────────────────── */

/* Primär — gefüllt mit Galaxy-Violett */
.btn {
  background: var(--astro-galaxy);
  color: #fff;
  border-color: var(--astro-galaxy);
}
.btn:hover { opacity: .82; }

/* Farbvarianten — Outline, Akzentfarbe als Rand & Text */
.btn.btn--red {
  background: transparent;
  color: var(--accent-red);
  border-color: var(--accent-red);
}
.btn.btn--green {
  background: transparent;
  color: var(--accent-green);
  border-color: var(--accent-green);
}
.btn.btn--amber {
  background: transparent;
  color: var(--accent-amber);
  border-color: var(--accent-amber);
}
.btn.btn--purple {
  background: transparent;
  color: var(--accent-purple);
  border-color: var(--accent-purple);
}
.btn.btn--red:hover,
.btn.btn--green:hover,
.btn.btn--amber:hover,
.btn.btn--purple:hover { opacity: .7; }

/* Ghost — transparentes Skelett */
.btn.btn--ghost {
  background: transparent;
  color: var(--ink-dim);
  border-color: var(--line);
  opacity: 1;
}
.btn.btn--ghost:hover {
  color: var(--ink);
  border-color: var(--ink-dim);
  opacity: 1;
}