/* ============================================================
   Dunkelmodus — Standard-Theme
   Aktivierung: <html data-theme="dark"> via snack.js
   (auto nach prefers-color-scheme, Toggle merkt Wahl lokal)
   ============================================================ */

:root[data-theme="dark"] {
    --cream: #1e293b;
    --line: #3a5074;
    --gray: #9aa4be;
    --navy: #e8ecf4;
    --navy-deep: #0f1722;
    --navy-soft: #293851;
    --navy-line: #3a5074;
    --navy-edge: #415980;
    --accent-ink: #ffa663;
    --white: #1e293b;
}

:root[data-theme="dark"] body { background: #141d29; color: #e8ecf4; }

/* ---------- Navigation ---------- */

:root[data-theme="dark"] nav { background: rgba(20, 29, 41, .93); border-bottom-color: var(--line); }
:root[data-theme="dark"] .nav-links a { color: #b9c1d6; }
:root[data-theme="dark"] .nav-links a:hover { color: var(--accent-soft); }
:root[data-theme="dark"] .brand { color: #e8ecf4; }

/* ---------- Flaechen ---------- */

:root[data-theme="dark"] .role,
:root[data-theme="dark"] .feat,
:root[data-theme="dark"] .tier,
:root[data-theme="dark"] .fact,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .quote-block,
:root[data-theme="dark"] .alert,
:root[data-theme="dark"] .modal-box,
:root[data-theme="dark"] .count-card { background: #1e293b; border-color: var(--line); }

:root[data-theme="dark"] .alert-success { background: #14332a; border-color: #1e5c46; }
:root[data-theme="dark"] .alert-warning { background: #3a2410; border-color: #6b3d10; }

/* ---------- Formulare ---------- */

:root[data-theme="dark"] .input,
:root[data-theme="dark"] .textarea,
:root[data-theme="dark"] .select { background: #141d29; color: #e8ecf4; border-color: var(--line); }
:root[data-theme="dark"] .input::placeholder,
:root[data-theme="dark"] .textarea::placeholder { color: #6b7690; }
:root[data-theme="dark"] .check .box,
:root[data-theme="dark"] .radio .dotmark { background: #141d29; }
:root[data-theme="dark"] .file::file-selector-button { color: #e8ecf4; }

/* ---------- Buttons / Badges ---------- */

:root[data-theme="dark"] .btn-navy,
:root[data-theme="dark"] .tag-navy,
:root[data-theme="dark"] .avatar,
:root[data-theme="dark"] .pagination a.current { background: #293851; }
:root[data-theme="dark"] .btn-light { background: #293851; color: #e8ecf4; border-color: var(--line); }
:root[data-theme="dark"] .btn-outline { color: #e8ecf4; }
:root[data-theme="dark"] .btn-outline:hover { border-color: #e8ecf4; }
:root[data-theme="dark"] .pagination a:hover { border-color: #e8ecf4; }

/* ---------- Navy-Flaechen bleiben dunkel ---------- */

:root[data-theme="dark"] .hero-panel,
:root[data-theme="dark"] .scene-view,
:root[data-theme="dark"] .p-stat { background: #293851; border-color: var(--navy-edge); }

:root[data-theme="dark"] .tag-outline { color: #b9c1d6; }
:root[data-theme="dark"] .pagination a.current { border-color: #293851; }

/* ---------- Chat-Demos ---------- */

:root[data-theme="dark"] .chatbox-foot .icon-btn:hover,
:root[data-theme="dark"] .emoji-row button:hover { background: #141d29; }
:root[data-theme="dark"] .icon-btn:hover { color: #e8ecf4; }
:root[data-theme="dark"] .chat-badge { border-color: #1e293b; }
:root[data-theme="dark"] .range::-webkit-slider-thumb { border-color: #1e293b; }
:root[data-theme="dark"] .range::-moz-range-thumb { border-color: #1e293b; }
:root[data-theme="dark"] .table tr:hover td { background: #293851; }

/* ---------- Theme-Umschalter ---------- */

.theme-toggle { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--gray); cursor: pointer; transition: color .2s var(--ease), border-color .2s var(--ease); }
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle { color: #b9c1d6; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }