/* ============================================
   DARK MODE
   Overrides the CSS custom properties style.css already uses everywhere
   (var(--bg-main), var(--text-dark), etc.) so switching theme re-colors
   the whole site without needing to touch every individual rule.
   ============================================ */
html[data-theme="dark"] {
    --bg-main: #0B1120;
    --bg-card: #141B2D;
    --bg-surface: #1B2438;

    --text-dark: #E8EDF4;
    --text-muted: #94A3B8;

    --border: #263248;

    --primary-light: #0B3B2E;
    --primary-dark: #6EE7B0;

    --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 50px -15px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] body {
    background-color: var(--bg-main);
    color: var(--text-dark);
}

/* A handful of elements set colors with inline styles or hardcoded hex
   instead of CSS variables (e.g. #1c2430, #fff, #6b7280 in .card__* and
   the ppb-* prompt box), so they don't automatically follow the variable
   overrides above. Patched here rather than in style.css so the light
   theme's exact original colors stay untouched. */
html[data-theme="dark"] .card,
html[data-theme="dark"] .premium-gallery-card,
html[data-theme="dark"] .premium-prompt-box,
html[data-theme="dark"] .share-card,
html[data-theme="dark"] .meta-card,
html[data-theme="dark"] .diverse-card,
html[data-theme="dark"] .style-card,
html[data-theme="dark"] .style-card-new,
html[data-theme="dark"] .prompt-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .collection-card,
html[data-theme="dark"] .prompt-mini-row {
    background: var(--bg-card);
    border-color: var(--border);
}

html[data-theme="dark"] .card__title a,
html[data-theme="dark"] .card__title,
html[data-theme="dark"] .card-content h3 a,
html[data-theme="dark"] .prompt-main-title,
html[data-theme="dark"] .ppb-title,
html[data-theme="dark"] .pmr-info a {
    color: var(--text-dark);
}

html[data-theme="dark"] .card__desc,
html[data-theme="dark"] .card-content p,
html[data-theme="dark"] .ppb-subtitle,
html[data-theme="dark"] .prompt-meta {
    color: var(--text-muted);
}

html[data-theme="dark"] .ppb-text-container,
html[data-theme="dark"] .rating-card {
    background: var(--bg-surface);
    border-color: var(--border);
}

html[data-theme="dark"] .ppb-text-fade {
    background: linear-gradient(to bottom, rgba(20, 27, 45, 0) 0%, rgba(20, 27, 45, 1) 100%);
}

html[data-theme="dark"] .site-header {
    background: rgba(11, 17, 32, 0.7);
    border-bottom-color: var(--border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .mobile-menu-drawer {
    background: var(--bg-card);
    border-color: var(--border);
}

html[data-theme="dark"] .icon-btn {
    background: var(--bg-surface);
    color: var(--text-dark);
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: var(--bg-surface);
    border-color: var(--border);
    color: var(--text-dark);
}

/* Toggle icon visibility is handled by JS (app.js), this just ensures
   both icons inherit the current theme's icon color correctly. */
html[data-theme="dark"] .theme-toggle {
    color: #FBBF24;
}

html[data-theme="dark"] .pcard,
html[data-theme="dark"] .pcard__footer {
    background: var(--bg-card);
}
html[data-theme="dark"] .pcard__fade {
    background: linear-gradient(to bottom,
        rgba(20, 27, 45, 0) 0%,
        rgba(20, 27, 45, 0.55) 40%,
        var(--bg-card) 92%);
}
html[data-theme="dark"] .pcard__share {
    background: var(--bg-surface);
    color: var(--text-dark);
}

html[data-theme="dark"] .tabs {
    background: var(--bg-card);
}
html[data-theme="dark"] .tab:hover:not(.active) {
    background: var(--bg-surface);
}