/* ═══════════════════════════════════════════════════════════
   SOCIAL TOOL  ::  THEME: DSCHUNGEL
   Tief, üppig, organisch. Feuchtes Smaragd-Grün, warme
   Ocker-Akzente, ein Hauch Korallenrot. Strukturen
   wie Pflanzenadern und Mooszüge.
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

[data-theme="dschungel"] {
  /* Hintergrund: dunkles, leicht feuchtes Waldboden-Grün */
  --bg:           #0F2620;
  --card:         #163129;
  --card2:        #1C3D32;
  --border:       #2D5849;
  --border-light: #244A3E;

  /* Text: Cremeweiß mit warmem Stich, wie Sonnenlicht durchs Blätterdach */
  --text:         #F1E8D4;
  --text-muted:   #A8C0A8;
  --text-hint:    #6F8C7A;

  /* Akzentfarben */
  --accent:        #7DD3A6;   /* Frischtrieb-Grün */
  --accent-bg:     #1F4A39;
  --accent-border: #4FA478;

  --warn:          #E8B764;   /* Ocker, sonnengewärmtes Holz */
  --warn-bg:       #3D3320;
  --warn-border:   #B58A3E;

  --danger:        #E97A6B;   /* Korallenrot, Hibiscus-Blüte */
  --danger-bg:     #422820;
  --danger-border: #B65F4F;

  --purple:        #B89BDE;   /* Orchidee */
  --purple-bg:     #2E2745;
  --purple-border: #8B70BC;

  --neutral-bg:     #2A3A33;
  --neutral-border: #506960;

  /* Form & Geometrie: weich-organisch */
  --radius:    18px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --btn-radius: 14px;

  /* Schatten: tief und feucht */
  --shadow:      0 4px 20px rgba(0, 0, 0, 0.35);
  --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  --btn-shadow:  0 3px 12px rgba(125, 211, 166, 0.20);

  /* Schriften */
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-label:   'Plus Jakarta Sans', system-ui, sans-serif;
  --font-display: 'Cormorant Garamond', 'Plus Jakarta Sans', serif;
}

/* ── Dschungel-spezifische Layer ───────────────────────────── */

/* Hintergrund: organische Blatt-Texturen aus SVG-noise + Verlauf */
[data-theme="dschungel"] body {
  background:
    radial-gradient(ellipse at 20% 10%,  rgba(125, 211, 166, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 90%,  rgba(232, 183, 100, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%,  rgba(20, 60, 45, 0.4) 0%, transparent 70%),
    var(--bg);
}

[data-theme="dschungel"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><defs><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.7  0 0 0 0 0.5  0 0 0 0.08 0'/></filter></defs><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: overlay;
}
[data-theme="dschungel"] .app { position: relative; z-index: 1; }

/* Titel: serifenbetonte Eleganz wie ein botanisches Heft */
[data-theme="dschungel"] .page-title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 28px;
  color: #F4ECD8;
}
[data-theme="dschungel"] .eyebrow {
  color: #7DD3A6;
  font-weight: 500;
}

/* Buttons: organisches Glow */
[data-theme="dschungel"] .btn-primary:not(:disabled) {
  background: linear-gradient(135deg, #2D7A56 0%, #4FA478 100%);
  color: #F1E8D4;
  border: 1px solid #5DCAA5;
  font-weight: 600;
}

/* Cards: leichte Innenglow wie Sonne durchs Blattwerk */
[data-theme="dschungel"] .card,
[data-theme="dschungel"] .row,
[data-theme="dschungel"] .two-btn,
[data-theme="dschungel"] .sig-tile,
[data-theme="dschungel"] .ob-step,
[data-theme="dschungel"] .zone-badge,
[data-theme="dschungel"] .action-card,
[data-theme="dschungel"] .val-box {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%),
    var(--card);
}

/* Sig-Tiles: ausgewählt = leuchtendes Mintgrün */
[data-theme="dschungel"] .sig-tile.sel {
  background: linear-gradient(135deg, #1F4A39, #2D6A4F);
  color: #C8F0D8;
  box-shadow: 0 0 0 1px #5DCAA5, 0 2px 8px rgba(125, 211, 166, 0.25);
}

/* Onboarding-Nummern: wie Botaniker-Etiketten */
[data-theme="dschungel"] .ob-num {
  background: #2D5849;
  color: #E8B764;
  border: 1px solid #4FA478;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
}
[data-theme="dschungel"] .ob-title { color: #E8B764; font-family: var(--font-display); font-size: 16px; font-weight: 600; }

/* Sum-Pills: Mossstein */
[data-theme="dschungel"] .sum-pill {
  background: rgba(45, 88, 73, 0.4);
  border-color: var(--border);
  color: #C8E0C8;
}

/* Nav-Dots: leuchtgrün wenn active */
[data-theme="dschungel"] .nav-dot.active { background: #7DD3A6; }
[data-theme="dschungel"] .nav-dot.done   { background: #4FA478; }
[data-theme="dschungel"] .nav-label      { color: #6F8C7A; }

/* Graph: dunkler */
[data-theme="dschungel"] .graph-wrap {
  background: #1A332A;
  border-color: #2D5849;
}

/* Add-Input: dunkel */
[data-theme="dschungel"] .add-input {
  background: #163129;
  color: #F1E8D4;
}

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

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

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