/* ============================================================================
   Theme System - Dark/Light Mode Toggle
   Separate file for manageable theme switching
   ============================================================================ */

:root {
    /* Default (Dark Mode) Variables */
    --bg-main: #020617;
    --bg-panel: rgba(15, 23, 42, 0.78);
    --bg-card: rgba(15, 23, 42, 0.92);
    --bg-card-soft: rgba(30, 41, 59, 0.72);
    --stroke: rgba(148, 163, 184, 0.18);
    --accent: #22d3ee;
    --accent-strong: #06b6d4;
    --accent-warm: #fb7185;
    --text-main: #f8fafc;
    --text-soft: rgba(226, 232, 240, 0.8);
    --shadow-soft: 0 20px 55px rgba(2, 6, 23, 0.4);
    --gradient-bg-1: rgba(34, 211, 238, 0.14);
    --gradient-bg-2: rgba(251, 113, 133, 0.16);
    --gradient-bg-3: #020617;
    --gradient-bg-4: #08111f;
    --gradient-bg-5: #07111d;
    --hero-input-bg: rgba(2, 6, 23, 0.55);
    --hero-input-placeholder: rgba(203, 213, 225, 0.58);
    --nav-pill-bg: rgba(15, 23, 42, 0.55);
    --nav-pill-text: #e2e8f0;
    --card-bg-start: rgba(15, 23, 42, 0.96);
    --card-bg-end: rgba(15, 23, 42, 0.78);
    --poster-fallback-bg: linear-gradient(180deg, rgba(30, 41, 59, 0.8), rgba(2, 6, 23, 0.8));
    --poster-fallback-text: rgba(226, 232, 240, 0.88);
    --card-glow: linear-gradient(180deg, transparent, rgba(2, 6, 23, 0.72));
    --cta-secondary-bg: rgba(8, 17, 31, 0.55);
    --filter-input-bg: rgba(2, 6, 23, 0.55);
    --detail-hero-overlay: rgba(2, 6, 23, 0.86);
    --detail-hero-fade-start: rgba(2, 6, 23, 0.15);
    --detail-hero-scrim-side: rgba(2, 6, 23, 0.88);
    --detail-poster-bg: rgba(2, 6, 23, 0.75);
    --input-stroke: rgba(148, 163, 184, 0.2);
    --mesh-line: rgba(148, 163, 184, 0.08);
    --mesh-mask-start: rgba(0, 0, 0, 0.95);
    --brand-gradient: linear-gradient(135deg, rgba(34, 211, 238, 0.95), rgba(251, 113, 133, 0.92));
    --brand-text: #04111f;
    --button-gradient: linear-gradient(135deg, rgba(34, 211, 238, 0.98), rgba(125, 211, 252, 0.94));
    --button-text: #02111f;
    --button-shadow-hover: 0 24px 48px rgba(34, 211, 238, 0.4);
    --secondary-button-stroke: rgba(34, 211, 238, 0.3);
    --chip-bg: rgba(15, 23, 42, 0.65);
    --chip-stroke: rgba(148, 163, 184, 0.18);
    --chip-hover-stroke: rgba(34, 211, 238, 0.45);
    --chip-language-stroke: rgba(251, 113, 133, 0.25);
    --eyebrow: rgba(165, 243, 252, 0.9);
    --link-accent: #a5f3fc;
    --link-accent-hover: #ffffff;
    --header-bg: rgba(2, 6, 23, 0.7);
    --footer-bg: rgba(2, 6, 23, 0.5);
    --transition-overlay-bg: #020617;
}

/* Light Mode Variables */
[data-theme="light"] {
    color-scheme: light;
    --bg-main: #f8fafc;
    --bg-panel: rgba(255, 255, 255, 0.88);
    --bg-card: rgba(255, 255, 255, 0.96);
    --bg-card-soft: rgba(239, 246, 255, 0.82);
    --stroke: rgba(51, 65, 85, 0.14);
    --accent: #0ea5e9;
    --accent-strong: #2563eb;
    --accent-warm: #f59e0b;
    --text-main: #0f172a;
    --text-soft: rgba(51, 65, 85, 0.74);
    --shadow-soft: 0 28px 70px -24px rgba(15, 23, 42, 0.28);
    --gradient-bg-1: rgba(14, 165, 233, 0.18);
    --gradient-bg-2: rgba(245, 158, 11, 0.14);
    --gradient-bg-3: #fbfdff;
    --gradient-bg-4: #eef7ff;
    --gradient-bg-5: #f8fafc;
    --hero-input-bg: rgba(255, 255, 255, 0.96);
    --hero-input-placeholder: rgba(71, 85, 105, 0.6);
    --nav-pill-bg: rgba(255, 255, 255, 0.82);
    --nav-pill-text: #334155;
    --card-bg-start: rgba(255, 255, 255, 0.99);
    --card-bg-end: rgba(240, 249, 255, 0.95);
    --poster-fallback-bg: linear-gradient(180deg, rgba(219, 234, 254, 0.95), rgba(254, 243, 199, 0.58));
    --poster-fallback-text: rgba(30, 41, 59, 0.66);
    --card-glow: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.38));
    --cta-secondary-bg: rgba(255, 255, 255, 0.9);
    --filter-input-bg: rgba(255, 255, 255, 0.95);
    --detail-hero-overlay: rgba(248, 250, 252, 0.92);
    --detail-hero-fade-start: rgba(248, 250, 252, 0.16);
    --detail-hero-scrim-side: rgba(248, 250, 252, 0.94);
    --detail-poster-bg: rgba(255, 255, 255, 0.95);
    --input-stroke: rgba(71, 85, 105, 0.2);
    --mesh-line: rgba(14, 165, 233, 0.12);
    --mesh-mask-start: rgba(0, 0, 0, 0.72);
    --brand-gradient: linear-gradient(135deg, #f59e0b 0%, #ef4444 45%, #0ea5e9 100%);
    --brand-text: #ffffff;
    --button-gradient: linear-gradient(135deg, #f59e0b 0%, #ef4444 48%, #2563eb 100%);
    --button-text: #ffffff;
    --button-shadow-hover: 0 24px 48px rgba(239, 68, 68, 0.24);
    --secondary-button-stroke: rgba(14, 165, 233, 0.28);
    --chip-bg: rgba(255, 255, 255, 0.72);
    --chip-stroke: rgba(51, 65, 85, 0.14);
    --chip-hover-stroke: rgba(14, 165, 233, 0.42);
    --chip-language-stroke: rgba(245, 158, 11, 0.34);
    --eyebrow: #0369a1;
    --link-accent: #0369a1;
    --link-accent-hover: #b45309;
    --header-bg: rgba(255, 255, 255, 0.72);
    --footer-bg: rgba(255, 255, 255, 0.78);
    --transition-overlay-bg: #f8fafc;
}

/* Apply theme variables to existing classes */
body.movie-site-bg {
    background:
        radial-gradient(circle at top left, var(--gradient-bg-1), transparent 36%),
        radial-gradient(circle at top right, var(--gradient-bg-2), transparent 28%),
        linear-gradient(180deg, var(--gradient-bg-3) 0%, var(--gradient-bg-4) 45%, var(--gradient-bg-5) 100%);
}

.hero-mesh {
    background-image:
        linear-gradient(var(--mesh-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--mesh-line) 1px, transparent 1px);
    mask-image: linear-gradient(180deg, var(--mesh-mask-start), transparent 90%);
}

.brand-mark {
    background: var(--brand-gradient);
    color: var(--brand-text);
}

.spotlight-panel,
.browse-shell,
.empty-shell,
.variant-card {
    background: var(--bg-panel);
    border-color: var(--stroke);
    box-shadow: var(--shadow-soft);
}

.nav-pill:hover,
.trend-chip:hover {
    border-color: var(--chip-hover-stroke);
    color: var(--link-accent-hover);
}

.nav-pill-accent,
.cta-button,
.back-to-top {
    background: var(--button-gradient);
    color: var(--button-text);
}

.cta-button-secondary {
    border-color: var(--secondary-button-stroke);
}

.back-to-top:hover {
    box-shadow: var(--button-shadow-hover);
}

.hero-input,
.hero-select,
.filter-input {
    background: var(--hero-input-bg);
    border-color: var(--input-stroke);
    color: var(--text-main);
}

.hero-input::placeholder,
.filter-input::placeholder {
    color: var(--hero-input-placeholder);
}

.eyebrow,
.section-kicker {
    color: var(--eyebrow);
}

.section-title {
    color: var(--text-main);
}

.trend-chip,
.meta-chip,
.badge-surface {
    background: var(--chip-bg);
    border-color: var(--chip-stroke);
    color: var(--text-soft);
}

.badge-language {
    border-color: var(--chip-language-stroke);
}

.nav-pill {
    background: var(--nav-pill-bg);
    color: var(--nav-pill-text);
}

.movie-card {
    background: linear-gradient(180deg, var(--card-bg-start), var(--card-bg-end));
    border-color: var(--stroke);
}

.movie-card:hover {
    border-color: var(--chip-hover-stroke);
}

.movie-poster-shell {
    background: var(--poster-fallback-bg);
}

.movie-poster-fallback,
.detail-poster-fallback {
    background: var(--poster-fallback-bg);
    color: var(--poster-fallback-text);
}

.movie-card-glow {
    background: var(--card-glow);
}

.cta-button-secondary {
    background: var(--cta-secondary-bg);
    color: var(--text-main);
}

.filter-input {
    background: var(--filter-input-bg);
}

.detail-hero {
    border-color: var(--stroke);
}

.detail-poster-frame {
    background: var(--detail-poster-bg);
    border-color: var(--stroke);
}

.page-transition-overlay {
    background: var(--transition-overlay-bg);
}

body.movie-site-bg header {
    border-color: var(--stroke);
}

body.movie-site-bg footer {
    background: var(--footer-bg);
    border-color: var(--stroke);
}

[data-theme="light"] body.movie-site-bg {
    color: var(--text-main);
}

[data-theme="light"] body.movie-site-bg header.bg-slate-950\/70 {
    background: var(--header-bg);
}

[data-theme="light"] body.movie-site-bg .text-white,
[data-theme="light"] body.movie-site-bg .text-slate-100,
[data-theme="light"] body.movie-site-bg .text-slate-200 {
    color: var(--text-main) !important;
}

[data-theme="light"] body.movie-site-bg .text-slate-300\/75,
[data-theme="light"] body.movie-site-bg .text-slate-300\/80,
[data-theme="light"] body.movie-site-bg .text-slate-200\/85,
[data-theme="light"] body.movie-site-bg .text-slate-400 {
    color: var(--text-soft) !important;
}

[data-theme="light"] body.movie-site-bg .text-cyan-200,
[data-theme="light"] body.movie-site-bg .text-cyan-200\/80 {
    color: var(--link-accent) !important;
}

[data-theme="light"] body.movie-site-bg .hover\:text-white:hover,
[data-theme="light"] body.movie-site-bg .hover\:text-cyan-200:hover {
    color: var(--link-accent-hover) !important;
}

[data-theme="light"] body.movie-site-bg .border-white\/10 {
    border-color: var(--stroke) !important;
}

[data-theme="light"] body.movie-site-bg .bg-slate-950\/50 {
    background: var(--footer-bg) !important;
}

/* Poster hairline outline flips to pure black in light mode (never tinted) */
[data-theme="light"] .detail-poster-frame .detail-poster {
    outline-color: oklch(0 0 0 / 0.1);
}

/* "Best available" flag keeps legible warmth on light surfaces */
[data-theme="light"] .variant-flag {
    border-color: rgba(180, 83, 9, 0.35);
    background: rgba(245, 158, 11, 0.14);
    color: #9a3412;
}

/* Theme Toggle Button */
.theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: var(--bg-panel);
    border: 1px solid var(--stroke);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-soft);
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
    z-index: 1000;
    color: var(--text-main);
}

.theme-toggle:hover {
    transform: scale(1.05);
    border-color: var(--accent);
}

.theme-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
}

.theme-toggle .sun-icon {
    display: none;
}

.theme-toggle .moon-icon {
    display: block;
}

[data-theme="light"] .theme-toggle .sun-icon {
    display: block;
}

[data-theme="light"] .theme-toggle .moon-icon {
    display: none;
}

/* Responsive adjustments */
@media (max-width: 720px) {
    .theme-toggle {
        top: auto;
        bottom: 5.5rem;
        right: 1.5rem;
        width: 2.75rem;
        height: 2.75rem;
    }
}

/* Smooth theme transition — scoped to the big surfaces only. A global
   `* { transition }` forced every element (and every hover/press state)
   through a 300ms color transition and caused jank; interactive controls
   already declare their own faster, property-specific transitions. */
body.movie-site-bg,
body.movie-site-bg header,
body.movie-site-bg footer,
body.movie-site-bg nav,
body.movie-site-bg main,
body.movie-site-bg section,
.spotlight-panel,
.browse-shell,
.empty-shell,
.more-like-shell,
.theme-toggle {
    transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
}

/* Skip Link for Accessibility */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: white;
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    z-index: 9999;
    transition: top 200ms ease;
}

.skip-link:focus {
    top: 1rem;
    outline: 3px solid var(--accent-strong);
    outline-offset: 2px;
}

/* Focus States for Keyboard Navigation */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.nav-pill:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    background: var(--nav-pill-bg);
}

.cta-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Screen Reader Only Class */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}