/* Dark Mode Variables - Bohio Boutique */

/* Light Mode (Default) */
:root {
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-accent: #0d9488;
    
    /* Text Colors */
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-tertiary: #64748b;
    --text-inverse: #ffffff;
    
    /* Border Colors */
    --border-primary: #e2e8f0;
    --border-secondary: #cbd5e1;
    --border-accent: #0d9488;
    
    /* Component Colors */
    --card-bg: #ffffff;
    --sidebar-bg: #ffffff;
    --navbar-bg: #ffffff;
    --input-bg: #ffffff;
    
    /* State Colors */
    --hover-bg: #f1f5f9;
    --active-bg: #e2e8f0;
    --focus-ring: #0d9488;
    
    /* Shadow */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Dark Mode */
[data-theme="dark"] {
    /* Background Colors */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-accent: #0d9488;
    
    /* Text Colors */
    --text-primary: #f8fafc;
    --text-secondary: #e2e8f0;
    --text-tertiary: #cbd5e1;
    --text-inverse: #0f172a;
    
    /* Border Colors */
    --border-primary: #334155;
    --border-secondary: #475569;
    --border-accent: #0d9488;
    
    /* Component Colors */
    --card-bg: #1e293b;
    --sidebar-bg: #1e293b;
    --navbar-bg: #1e293b;
    --input-bg: #0f172a;
    
    /* State Colors */
    --hover-bg: #334155;
    --active-bg: #475569;
    --focus-ring: #0d9488;
    
    /* Shadow */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.25);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
}

/* Apply variables to common classes */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-tertiary { background-color: var(--bg-tertiary); }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }

.border-primary { border-color: var(--border-primary); }
.border-secondary { border-color: var(--border-secondary); }

/* Component-specific dark mode styles */
[data-theme="dark"] {
    /* Body background */
    body {
        background-color: var(--bg-primary);
        color: var(--text-primary);
    }
    
    /* Cards */
    .card, .bg-white {
        background-color: var(--card-bg) !important;
        color: var(--text-primary);
        border-color: var(--border-primary);
    }
    
    /* Navbar */
    .navbar {
        background-color: var(--navbar-bg) !important;
        border-color: var(--border-primary);
    }
    
    /* Sidebar */
    .sidebar, .bg-white.p-4.rounded-lg {
        background-color: var(--sidebar-bg) !important;
        color: var(--text-primary);
        border-color: var(--border-primary);
    }
    
    /* Inputs */
    input, select, textarea {
        background-color: var(--input-bg) !important;
        color: var(--text-primary);
        border-color: var(--border-primary);
    }
    
    input:focus, select:focus, textarea:focus {
        border-color: var(--focus-ring);
        box-shadow: 0 0 0 3px rgb(13 148 136 / 0.1);
    }
    
    /* Buttons */
    .btn-light {
        background-color: var(--bg-tertiary) !important;
        color: var(--text-primary);
        border-color: var(--border-primary);
    }
    
    .btn-light:hover {
        background-color: var(--hover-bg) !important;
    }
    
    /* Links */
    a {
        color: var(--text-primary);
    }
    
    a:hover {
        color: var(--bg-accent);
    }
    
    /* Tables */
    .table {
        color: var(--text-primary);
    }
    
    .table-striped > tbody > tr:nth-of-type(odd) > td,
    .table-striped > tbody > tr:nth-of-type(odd) > th {
        background-color: var(--bg-secondary);
    }
    
    /* Modals */
    .modal-content {
        background-color: var(--card-bg) !important;
        color: var(--text-primary);
    }
    
    /* Dropdowns */
    .dropdown-menu {
        background-color: var(--card-bg) !important;
        border-color: var(--border-primary);
    }
    
    .dropdown-item {
        color: var(--text-primary);
    }
    
    .dropdown-item:hover {
        background-color: var(--hover-bg);
        color: var(--text-primary);
    }
    
    /* Badges */
    .badge {
        color: var(--text-primary);
    }
    
    /* Alerts */
    .alert {
        color: var(--text-primary);
        border-color: var(--border-primary);
    }
    
    /* Gallery specific */
    .product-card {
        background-color: var(--card-bg) !important;
        border-color: var(--border-primary);
        transition: all 0.3s ease;
    }
    
    .product-card:hover {
        box-shadow: var(--shadow-lg);
        transform: translateY(-2px);
    }
    
    /* Filters sidebar */
    .filter-sidebar {
        background-color: var(--sidebar-bg) !important;
        border-color: var(--border-primary);
    }
    
    /* Toggle buttons */
    .view-toggle {
        background-color: var(--bg-tertiary);
        color: var(--text-primary);
    }
    
    .view-toggle:hover {
        background-color: var(--hover-bg);
    }
    
    .view-toggle.active {
        background-color: var(--bg-accent);
        color: var(--text-inverse);
    }
}

/* Smooth transitions */
* {
    transition: background-color 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Transiciones suaves para cambio de tema */
html[data-theme] {
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Overlay de transición */
#theme-transition-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    z-index: 9999 !important;
}

/* Gradiente de navbar para modo oscuro */
.navbar-gradient {
    background: linear-gradient(135deg, #00c9c9, #ff7e5f);
    transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .navbar-gradient {
    background: linear-gradient(135deg, #1e293b, #334155);
}

/* Mantener fuente Satisfy en modo oscuro */
[data-theme="dark"] .font-satisfy {
    font-family: 'Satisfy', cursive !important;
}

/* Dark mode toggle animation */
.dark-mode-toggle {
    position: relative;
    overflow: hidden;
}

.dark-mode-toggle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(13, 148, 136, 0.3) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.dark-mode-toggle:active::before {
    width: 100px;
    height: 100px;
}

/* Animaciones para botones de modo oscuro en dropdown */
#dark-mode-icon, #dark-mode-icon-mobile {
    transition: transform 0.3s ease, color 0.3s ease;
}

#dark-mode-icon:hover, #dark-mode-icon-mobile:hover {
    transform: scale(1.1);
}

#dark-mode-status, #dark-mode-status-mobile {
    transition: all 0.3s ease;
    transform: scale(1);
}

#dark-mode-status:hover, #dark-mode-status-mobile:hover {
    transform: scale(1.05);
}

/* Navbar dropdown en modo oscuro */
[data-theme="dark"] .absolute.right-0.mt-3.w-40.rounded-xl {
    background-color: var(--card-bg) !important;
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] .absolute.right-0.mt-3.w-40.rounded-xl a {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .absolute.right-0.mt-3.w-40.rounded-xl button {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .absolute.right-0.mt-3.w-40.rounded-xl a:hover,
[data-theme="dark"] .absolute.right-0.mt-3.w-40.rounded-xl button:hover {
    background-color: var(--hover-bg) !important;
}

/* Menú móvil en modo oscuro */
[data-theme="dark"] .md\:hidden.rounded-2xl.bg-white\/90 {
    background-color: var(--card-bg) !important;
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] .md\:hidden.rounded-2xl.bg-white\/90 a {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .md\:hidden.rounded-2xl.bg-white\/90 button {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .md\:hidden.rounded-2xl.bg-white\/90 a:hover,
[data-theme="dark"] .md\:hidden.rounded-2xl.bg-white\/90 button:hover {
    background-color: var(--hover-bg) !important;
}