/* ═══════════════════════════════════════════════════════════
   SOCIAL TOOL  ::  THEME: MITTERNACHT
   Tiefes Indigo, sternenhaft, kühl. Ruhe einer klaren Nacht.
   Akzente in leuchtendem Türkis und sanftem Lavendel.
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

[data-theme="mitternacht"] {
  /* Tiefer Nachthimmel */
  --bg:           #0A0E27;
  --card:         #141A3A;
  --card2:        #1B2548;
  --border:       #2D3868;
  --border-light: #232C56;

  /* Sternenlicht-Text */
  --text:         #E8EAFB;
  --text-muted:   #9098C8;
  --text-hint:    #5D6699;

  /* Akzentfarben */
  --accent:        #7FE5D8;   /* Polarlicht-Türkis */
  --accent-bg:     #16383A;
  --accent-border: #4AB8AC;

  --warn:          #F5C97A;   /* Mondgold */
  --warn-bg:       #3D3322;
  --warn-border:   #C29A4F;

  --danger:        #FF8B9F;   /* Roter Riese */
  --danger-bg:     #3E2030;
  --danger-border: #C46680;

  --purple:        #B19CFF;   /* Andromeda-Lavendel */
  --purple-bg:     #2A2755;
  --purple-border: #8770D8;

  --neutral-bg:     #1F2748;
  --neutral-border: #4A5586;

  /* Form: ruhig, leicht abgerundet */
  --radius:    14px;
  --radius-sm: 10px;
  --radius-xs: 7px;
  --btn-radius: 12px;

  /* Schatten: weiches Glow statt harter Schatten */
  --shadow:      0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(127, 229, 216, 0.05);
  --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  --btn-shadow:  0 0 24px rgba(127, 229, 216, 0.25);

  /* Schriften */
  --font-body:    'Inter', system-ui, sans-serif;
  --font-label:   'Inter', system-ui, sans-serif;
  --font-display: 'Fraunces', 'Inter', serif;
}

/* ── Mitternacht-spezifische Layer ─────────────────────────── */

/* Hintergrund: Sternenfeld */
[data-theme="mitternacht"] body {
  background:
    radial-gradient(circle at 30% 20%, rgba(127, 229, 216, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(177, 156, 255, 0.08) 0%, transparent 45%),
    var(--bg);
}

[data-theme="mitternacht"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(232, 234, 251, 0.7) 0.5px, transparent 0.6px),
    radial-gradient(circle, rgba(127, 229, 216, 0.5) 0.4px, transparent 0.5px);
  background-size: 90px 90px, 140px 140px;
  background-position: 0 0, 45px 65px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}
[data-theme="mitternacht"] .app { position: relative; z-index: 1; }

/* Titel: Fraunces (Display-Serif), elegant */
[data-theme="mitternacht"] .page-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #F4F5FE;
}

[data-theme="mitternacht"] .eyebrow {
  color: #7FE5D8;
  letter-spacing: 0.18em;
  font-weight: 500;
}

/* Primärbutton: leuchtendes Türkis-Glow */
[data-theme="mitternacht"] .btn-primary:not(:disabled) {
  background: linear-gradient(135deg, #4AB8AC 0%, #7FE5D8 100%);
  color: #0A0E27;
  font-weight: 700;
  border: 1px solid #7FE5D8;
  box-shadow: 0 0 30px rgba(127, 229, 216, 0.35), 0 4px 12px rgba(0, 0, 0, 0.3);
}
[data-theme="mitternacht"] .btn-primary:disabled {
  background: #1F2748;
  color: #5D6699;
}

/* Cards: leichter Glow am Rand */
[data-theme="mitternacht"] .card,
[data-theme="mitternacht"] .row,
[data-theme="mitternacht"] .two-btn,
[data-theme="mitternacht"] .sig-tile,
[data-theme="mitternacht"] .ob-step,
[data-theme="mitternacht"] .zone-badge,
[data-theme="mitternacht"] .action-card,
[data-theme="mitternacht"] .val-box {
  background: var(--card);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Sig-Tiles: ausgewählt = sanftes Glow */
[data-theme="mitternacht"] .sig-tile.sel {
  background: #16383A;
  color: #7FE5D8;
  border-color: #4AB8AC;
  box-shadow: 0 0 16px rgba(127, 229, 216, 0.3);
}

/* Onboarding-Nummern: Mond-Kreise */
[data-theme="mitternacht"] .ob-num {
  background: linear-gradient(135deg, #2A2755, #4A4080);
  color: #F5C97A;
  border: 1px solid #7FE5D8;
  font-family: var(--font-display);
  font-size: 14px;
}
[data-theme="mitternacht"] .ob-title {
  color: #F5C97A;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
}

/* Nav-Dots: leuchtgrün */
[data-theme="mitternacht"] .nav-dot.active { background: #7FE5D8; box-shadow: 0 0 8px rgba(127, 229, 216, 0.6); }
[data-theme="mitternacht"] .nav-dot.done   { background: #4AB8AC; }
[data-theme="mitternacht"] .nav-label      { color: #5D6699; }

/* Sum-Pills: Halbtransparent */
[data-theme="mitternacht"] .sum-pill {
  background: rgba(127, 229, 216, 0.06);
  border-color: var(--border);
  color: #9098C8;
}

/* Graph: dunkler */
[data-theme="mitternacht"] .graph-wrap {
  background: #131838;
  border-color: #2D3868;
}

/* Add-Input: dunkel */
[data-theme="mitternacht"] .add-input {
  background: #1B2548;
  color: #E8EAFB;
  border-color: #2D3868;
}
[data-theme="mitternacht"] .add-input:focus { border-color: #7FE5D8; }

/* Theme-Panel im Dunkelmodus */
[data-theme="mitternacht"] .theme-panel,
[data-theme="mitternacht"] .theme-toggle { background: var(--card); }

/* Details-Pfeil */
[data-theme="mitternacht"] details > summary::before { color: #7FE5D8; }

/* Back-Button */
[data-theme="mitternacht"] .btn-back { color: #9098C8; }

/* Tip-Buttons (im Falle) */
[data-theme="mitternacht"] .tip-btn { background: #1F2748; color: #5D6699; border-color: #2D3868; }