/* ═══════════════════════════════════════════════════════════════
   THORNEVERSE - THEME STYLES
   Dark/Light Mode Support
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   THEME VARIABLES
   Default: Dark Theme
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* Theme-aware colors */
    --theme-bg-primary: #000000;
    --theme-bg-secondary: #0a0a0f;
    --theme-bg-tertiary: #121218;
    --theme-bg-card: rgba(0, 0, 0, 0.65);
    --theme-bg-overlay: rgba(0, 0, 0, 0.97);
    --theme-bg-input: rgba(0, 0, 0, 0.3);

    --theme-text-primary: #f0e8ec;
    --theme-text-secondary: #c8b8c0;
    --theme-text-tertiary: #8a7a82;
    --theme-text-muted: #666666;

    --theme-border-subtle: rgba(255, 255, 255, 0.1);
    --theme-border-medium: rgba(255, 255, 255, 0.2);

    /* Accent colors stay consistent */
    --theme-accent-gold: #d4a020;
    --theme-accent-gold-hover: #e8b830;
    --theme-accent-crimson: #c41a3a;
    --theme-accent-purple: #a78bfa;

    /* Reader specific */
    --theme-reader-bg: #0a0a0f;
    --theme-reader-text: #ddd;
    --theme-reader-panel: rgba(12, 8, 20, 0.98);

    /* Shadow intensity */
    --theme-shadow-intensity: 0.9;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════════════════════════════ */

[data-theme="light"] {
    --theme-bg-primary: #f8f6f4;
    --theme-bg-secondary: #ffffff;
    --theme-bg-tertiary: #f0ebe6;
    --theme-bg-card: rgba(255, 255, 255, 0.9);
    --theme-bg-overlay: rgba(255, 255, 255, 0.97);
    --theme-bg-input: rgba(0, 0, 0, 0.05);

    --theme-text-primary: #1a1a1f;
    --theme-text-secondary: #4a4a4f;
    --theme-text-tertiary: #6a6a6f;
    --theme-text-muted: #999999;

    --theme-border-subtle: rgba(0, 0, 0, 0.1);
    --theme-border-medium: rgba(0, 0, 0, 0.15);

    /* Adjusted accent colors for light mode */
    --theme-accent-gold: #8b6914;
    --theme-accent-gold-hover: #a47a18;
    --theme-accent-crimson: #8b1020;
    --theme-accent-purple: #7c3aed;

    /* Reader in light mode */
    --theme-reader-bg: #faf8f5;
    --theme-reader-text: #2a2a2f;
    --theme-reader-panel: rgba(250, 248, 245, 0.98);

    /* Shadow intensity */
    --theme-shadow-intensity: 0.15;
}

/* ═══════════════════════════════════════════════════════════════
   SEPIA THEME (Reader-only option)
   ═══════════════════════════════════════════════════════════════ */

[data-theme="sepia"] {
    --theme-reader-bg: #f4ecd8;
    --theme-reader-text: #433422;
    --theme-reader-panel: rgba(244, 236, 216, 0.98);
    --theme-accent-purple: #8b6914;
}

/* ═══════════════════════════════════════════════════════════════
   THEME-AWARE COMPONENT OVERRIDES
   ═══════════════════════════════════════════════════════════════ */

/* Body */
body {
    background: var(--theme-bg-primary);
    color: var(--theme-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Cards */
[data-theme="light"] .series-card,
[data-theme="light"] .book-card,
[data-theme="light"] .card {
    background: var(--theme-bg-card);
    border-color: var(--theme-border-medium);
    box-shadow: 0 2px 8px rgba(0, 0, 0, var(--theme-shadow-intensity));
}

[data-theme="light"] .series-card:hover,
[data-theme="light"] .book-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Text */
[data-theme="light"] .text-soft,
[data-theme="light"] .series-desc,
[data-theme="light"] .about-text,
[data-theme="light"] .connect-text {
    color: var(--theme-text-secondary);
}

[data-theme="light"] .text-dim,
[data-theme="light"] .text-muted {
    color: var(--theme-text-tertiary);
}

/* Buttons */
[data-theme="light"] .btn-primary {
    background: var(--theme-bg-secondary);
    border-color: var(--theme-accent-gold);
    color: var(--theme-accent-gold);
}

[data-theme="light"] .btn-library {
    background: var(--theme-bg-secondary);
    border-color: var(--theme-accent-gold);
    color: var(--theme-accent-gold);
}

/* Header */
[data-theme="light"] .site-header {
    background: linear-gradient(to bottom, rgba(248, 246, 244, 0.95), transparent);
}

[data-theme="light"] .logo {
    color: var(--theme-accent-gold);
}

/* Footer */
[data-theme="light"] .site-footer {
    background: var(--theme-bg-secondary);
    border-color: var(--theme-border-medium);
}

/* Forms */
[data-theme="light"] .form-input,
[data-theme="light"] .search-input {
    background: var(--theme-bg-input);
    border-color: var(--theme-border-medium);
    color: var(--theme-text-primary);
}

/* Warning Screen */
[data-theme="light"] .warning-screen {
    background: var(--theme-bg-overlay);
}

[data-theme="light"] .warning-text {
    color: var(--theme-text-primary);
}

/* Drawer */
[data-theme="light"] .drawer {
    background: var(--theme-bg-secondary);
    border-color: var(--theme-accent-gold);
}

/* ═══════════════════════════════════════════════════════════════
   READER THEME OVERRIDES
   ═══════════════════════════════════════════════════════════════ */

/* Reader background */
[data-theme="light"] .reader-viewport,
[data-theme="light"] body.reader-page {
    background: var(--theme-reader-bg);
}

[data-theme="sepia"] .reader-viewport,
[data-theme="sepia"] body.reader-page {
    background: var(--theme-reader-bg);
}

/* Reader header */
[data-theme="light"] .reader-header,
[data-theme="light"] .header {
    background: linear-gradient(180deg, rgba(248, 246, 244, 0.98), rgba(248, 246, 244, 0.85));
    border-color: var(--theme-border-medium);
}

[data-theme="sepia"] .reader-header,
[data-theme="sepia"] .header {
    background: linear-gradient(180deg, rgba(244, 236, 216, 0.98), rgba(244, 236, 216, 0.85));
}

/* Reader bottom bar */
[data-theme="light"] .bottom-bar {
    background: linear-gradient(0deg, rgba(248, 246, 244, 0.98), rgba(248, 246, 244, 0.9));
    border-color: var(--theme-border-medium);
}

[data-theme="sepia"] .bottom-bar {
    background: linear-gradient(0deg, rgba(244, 236, 216, 0.98), rgba(244, 236, 216, 0.9));
}

/* Page content */
[data-theme="light"] .page-content p,
[data-theme="sepia"] .page-content p {
    color: var(--theme-reader-text);
}

/* Panels */
[data-theme="light"] .panel {
    background: var(--theme-reader-panel);
    border-color: var(--theme-border-medium);
}

[data-theme="sepia"] .panel {
    background: var(--theme-reader-panel);
}

/* Reader buttons */
[data-theme="light"] .hdr-btn,
[data-theme="light"] .nav-btn {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--theme-border-medium);
    color: var(--theme-accent-purple);
}

[data-theme="light"] .hdr-btn:hover,
[data-theme="light"] .nav-btn:active {
    background: rgba(0, 0, 0, 0.1);
}

/* Home button */
[data-theme="light"] .home-btn {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--theme-border-medium);
    color: var(--theme-accent-purple);
}

/* Progress ring */
[data-theme="light"] .progress-ring-bg {
    stroke: rgba(0, 0, 0, 0.1);
}

/* ═══════════════════════════════════════════════════════════════
   THEME TOGGLE COMPONENT
   ═══════════════════════════════════════════════════════════════ */

.theme-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.theme-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--theme-border-medium);
    background: var(--theme-bg-secondary);
    color: var(--theme-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.theme-btn:hover {
    border-color: var(--theme-accent-gold);
    color: var(--theme-accent-gold);
}

.theme-btn.active {
    background: var(--theme-accent-gold);
    border-color: var(--theme-accent-gold);
    color: var(--theme-bg-primary);
}

/* Theme icons */
.theme-icon-dark::before { content: '🌙'; }
.theme-icon-light::before { content: '☀️'; }
.theme-icon-sepia::before { content: '📜'; }

/* Reader theme selector */
.theme-selector {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.theme-option {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--theme-border-medium);
    background: var(--theme-bg-secondary);
    color: var(--theme-text-secondary);
    cursor: pointer;
    text-align: center;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

.theme-option:hover {
    border-color: var(--theme-accent-purple);
}

.theme-option.active {
    border-color: var(--theme-accent-purple);
    background: rgba(167, 139, 250, 0.1);
    color: var(--theme-accent-purple);
}

.theme-option-preview {
    width: 100%;
    height: 30px;
    border-radius: 4px;
    margin-bottom: 5px;
}

.theme-option[data-theme="dark"] .theme-option-preview {
    background: #0a0a0f;
}

.theme-option[data-theme="light"] .theme-option-preview {
    background: #faf8f5;
}

.theme-option[data-theme="sepia"] .theme-option-preview {
    background: #f4ecd8;
}

/* ═══════════════════════════════════════════════════════════════
   TRANSITIONS
   ═══════════════════════════════════════════════════════════════ */

/* Smooth theme transitions */
body,
.series-card,
.book-card,
.card,
.site-header,
.site-footer,
.drawer,
.panel,
.reader-header,
.bottom-bar,
.hdr-btn,
.nav-btn,
.btn,
.form-input,
.search-input {
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════════════════════════════════ */

@media print {
    :root {
        --theme-bg-primary: #ffffff;
        --theme-bg-secondary: #ffffff;
        --theme-text-primary: #000000;
        --theme-text-secondary: #333333;
    }

    .reader-header,
    .bottom-bar,
    .theme-toggle-btn,
    .hdr-btn.stealth {
        display: none !important;
    }

    .page-content {
        position: static;
        overflow: visible;
        padding: 0;
    }

    .page-content p {
        color: #000 !important;
    }
}