/* =========================================================
   DARK THEME — Suallar.net
   Palitra: #2D3250  #424769  #7077A1  #F6B17A
   ========================================================= */

:root[data-theme="dark"] {
    --bg-primary:      #1F2340;
    --bg-secondary:    #2D3250;
    --bg-tertiary:     #262A47;
    --bg-elevated:     #424769;
    --bg-overlay:      rgba(45, 50, 80, 0.85);
    --bg-glass:        rgba(66, 71, 105, 0.55);

    --text-primary:    #F4F4F8;
    --text-secondary:  #C7CAE0;
    --text-muted:      #7077A1;
    --text-inverse:    #1F2340;

    --color-accent:    #F6B17A;
    --color-accent-2:  #7077A1;
    --color-success:   #82E0AA;
    --color-warning:   #F6B17A;
    --color-danger:    #FF6B6B;
    --color-info:      #6FA3F2;

    --border-color:    rgba(255, 255, 255, 0.08);
    --border-strong:   rgba(255, 255, 255, 0.18);
    --shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md:       0 6px 20px -8px rgba(0, 0, 0, 0.55);
    --shadow-lg:       0 20px 45px -15px rgba(246, 177, 122, 0.3);
    --shadow-glow:     0 0 35px rgba(246, 177, 122, 0.25);

    --gradient-hero:   linear-gradient(135deg, #2D3250 0%, #424769 100%);
    --gradient-card:   linear-gradient(135deg, #424769 0%, #2D3250 100%);
    --gradient-accent: linear-gradient(120deg, #F6B17A 0%, #FFB58E 100%);

    --hero-video-opacity: 0.25;
    --hero-overlay:    linear-gradient(180deg, rgba(31,35,64,0.55) 0%, rgba(31,35,64,0.95) 100%);

    --divider-color:   #F6B17A;
    --selection-bg:    #F6B17A;
    --selection-fg:    #1F2340;
}

/* ============ DARK MODE TUNING ============ */
:root[data-theme="dark"] body {
    background: var(--bg-primary);
    color: var(--text-primary);
}

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6 {
    color: var(--text-primary);
}

:root[data-theme="dark"] .card-base,
:root[data-theme="dark"] .category-card,
:root[data-theme="dark"] .stat-card {
    background: var(--bg-elevated);
    border-color: var(--border-color);
}

:root[data-theme="dark"] .card-base:hover,
:root[data-theme="dark"] .category-card:hover {
    box-shadow: 0 25px 50px -20px rgba(246,177,122,0.4);
    border-color: var(--color-accent);
}

:root[data-theme="dark"] .category-card .icon-circle {
    background: var(--gradient-accent);
    color: var(--text-inverse);
    box-shadow: 0 12px 25px -10px rgba(246,177,122,0.55);
}

:root[data-theme="dark"] .btn-primary {
    background: var(--gradient-accent);
    color: var(--text-inverse);
}
:root[data-theme="dark"] .btn-primary:hover { color: var(--text-inverse); }

:root[data-theme="dark"] .btn-secondary {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-color);
}
:root[data-theme="dark"] .btn-secondary:hover {
    background: var(--bg-tertiary);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

:root[data-theme="dark"] .btn-outline {
    color: var(--color-accent);
    border-color: var(--color-accent);
}
:root[data-theme="dark"] .btn-outline:hover {
    background: var(--color-accent);
    color: var(--text-inverse);
}

:root[data-theme="dark"] .input-base {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-color);
}
:root[data-theme="dark"] .input-base::placeholder { color: var(--text-muted); }
:root[data-theme="dark"] .input-base:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(246,177,122,0.18);
}

:root[data-theme="dark"] .site-header {
    background: rgba(31,35,64,0.78);
    border-bottom-color: var(--border-color);
}
:root[data-theme="dark"] .site-header .nav-link { color: var(--text-secondary); }
:root[data-theme="dark"] .site-header .nav-link:hover {
    color: var(--color-accent);
    background: rgba(246,177,122,0.08);
}
:root[data-theme="dark"] .site-header .nav-link.active { color: var(--color-accent); }

:root[data-theme="dark"] .theme-toggle {
    background: var(--bg-elevated);
    border-color: var(--border-color);
    color: var(--text-primary);
}
:root[data-theme="dark"] .theme-toggle:hover { color: var(--color-accent); }

:root[data-theme="dark"] .hero h1 {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

:root[data-theme="dark"] .rotator { color: var(--color-accent); }

:root[data-theme="dark"] .divider-wave path { fill: var(--bg-secondary); }

:root[data-theme="dark"] .divider-line {
    background: linear-gradient(90deg, transparent 0%, var(--color-accent) 25%, var(--color-accent-2) 75%, transparent 100%);
}

:root[data-theme="dark"] .divider-dots span { background: var(--color-accent); }

:root[data-theme="dark"] .alert-success { background: rgba(130,224,170,0.10); color: #b9f3ce; border-left-color: var(--color-success); }
:root[data-theme="dark"] .alert-danger  { background: rgba(255,107,107,0.10); color: #ff9b9b; border-left-color: var(--color-danger); }
:root[data-theme="dark"] .alert-info    { background: rgba(112,119,161,0.18); color: #b9c0e4; border-left-color: var(--color-accent-2); }
:root[data-theme="dark"] .alert-warning { background: rgba(246,177,122,0.12); color: #fbd4ac; border-left-color: var(--color-warning); }

:root[data-theme="dark"] .site-footer {
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border-top-color: var(--border-color);
}
:root[data-theme="dark"] .site-footer h4 { color: var(--text-primary); }
:root[data-theme="dark"] .site-footer a { color: var(--text-secondary); }
:root[data-theme="dark"] .site-footer a:hover { color: var(--color-accent); }

:root[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-secondary); }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--gradient-accent); }

/* Quiz/test specific */
:root[data-theme="dark"] .quiz-option { background: var(--bg-elevated); border-color: var(--border-color); color: var(--text-primary); }
:root[data-theme="dark"] .quiz-option:hover { border-color: var(--color-accent); }
:root[data-theme="dark"] .quiz-option.selected { background: rgba(246,177,122,0.18); border-color: var(--color-accent); }
:root[data-theme="dark"] .quiz-option.correct  { background: rgba(130,224,170,0.18); border-color: var(--color-success); }
:root[data-theme="dark"] .quiz-option.wrong    { background: rgba(255,107,107,0.18); border-color: var(--color-danger); }

/* Glassmorphism dim */
:root[data-theme="dark"] .card-glass { background: var(--bg-glass); }

/* Code/formula blocks */
:root[data-theme="dark"] code,
:root[data-theme="dark"] pre {
    background: rgba(0,0,0,0.25);
    color: #ffd2a8;
    padding: .15rem .4rem;
    border-radius: 6px;
}