/* Theme Variables */
:root {
    --bg-primary: #050505;
    --bg-secondary: #020202;
    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;
    --border-light: rgba(255, 255, 255, 0.1);
    --panel-bg: rgba(255, 255, 255, 0.03);
}

body.light-mode {
    --bg-primary: #f4f4f5;
    --bg-secondary: #e4e4e7;
    --text-primary: #18181b;
    --text-secondary: #52525b;
    --border-light: rgba(0, 0, 0, 0.1);
    --panel-bg: rgba(255, 255, 255, 0.8);
}

/* Light Mode Specific */
body.light-mode {
    background-color: #f4f4f5 !important;
    color: #18181b !important;
}

body.light-mode .film-grain {
    opacity: 0.02;
    filter: invert(1);
}

body.light-mode .text-white:not(.duration-badge):not(.keep-white) {
    color: #18181b !important;
}

body.light-mode .text-zinc-400 {
    color: #52525b !important;
}

body.light-mode .text-zinc-500 {
    color: #71717a !important;
}

body.light-mode .text-zinc-300 {
    color: #3f3f46 !important;
}

body.light-mode .bg-black {
    background-color: #ffffff !important;
}

body.light-mode .bg-\[\#050505\] {
    background-color: #f4f4f5 !important;
}

body.light-mode .bg-\[\#020202\] {
    background-color: #e4e4e7 !important;
}

body.light-mode .bg-white\/5 {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

body.light-mode .bg-white\/10 {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .border-white\/10 {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .border-white\/20 {
    border-color: rgba(0, 0, 0, 0.2) !important;
}

body.light-mode .hover\:bg-white\/5:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

body.light-mode .hover\:bg-white\/10:hover {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .bento-card {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.03);
}

body.light-mode .bento-card:hover {
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.08);
}

body.light-mode nav {
    background: rgba(244, 244, 245, 0.8) !important;
    border-bottom-color: rgba(0, 0, 0, 0.05) !important;
}

body.light-mode .btn-cta {
    background: linear-gradient(180deg, #18181b 0%, #000000 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

body.light-mode .text-gradient-hero {
    background: linear-gradient(135deg, #000000 0%, #52525b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.light-mode #sidebar {
    background-color: #f4f4f5 !important;
    border-right-color: rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .sidebar-link:hover {
    color: #000 !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
}

body.light-mode .sidebar-link.active {
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: #000 !important;
}

body.light-mode .duration-badge {
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.75) !important;
}

body.light-mode .prose h2,
body.light-mode .prose h3,
body.light-mode .prose h4,
body.light-mode .prose strong,
body.light-mode .prose a {
    color: #000 !important;
}

body.light-mode .prose li::before {
    background-color: #000 !important;
}

body.light-mode .prose section {
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

body.light-mode input,
body.light-mode textarea {
    background-color: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #000 !important;
}

body.light-mode input::placeholder,
body.light-mode textarea::placeholder {
    color: #a1a1aa !important;
}

body.light-mode #auth-modal-content,
body.light-mode #share-modal-content,
body.light-mode #user-dropdown {
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

body.light-mode .bg-zinc-900\/90 {
    background-color: rgba(255, 255, 255, 0.95) !important;
}