/**
 * TomDeals Theme System
 * Light & Dark Mode Styles
 */

/* Light Theme (Default) */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    --border-color: #e5e7eb;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    --tom-green: #8da242;
    --tom-light-green: #aec45f;
    --tom-dark: #1d2228;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --hover-bg: #f3f4f6;
}

/* Dark Theme */
[data-theme="dark"] {
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-tertiary: #374151;
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-tertiary: #9ca3af;
    --border-color: #374151;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.6);
    --tom-green: #9db856;
    --tom-light-green: #b8cc6f;
    --tom-dark: #f9fafb;
    --card-bg: #1f2937;
    --input-bg: #374151;
    --hover-bg: #374151;
}

/* Apply theme variables to body and common elements */
body {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Navigation */
nav {
    background-color: var(--bg-primary) !important;
    border-bottom-color: var(--border-color) !important;
}

nav a, nav button {
    color: var(--text-primary) !important;
}

nav input {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Background colors */
.bg-gray-50 {
    background-color: var(--bg-secondary) !important;
}

.bg-gray-100 {
    background-color: var(--bg-tertiary) !important;
}

.bg-gray-200 {
    background-color: var(--border-color) !important;
}

/* Cards */
.bg-white {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] .bg-white {
    background-color: var(--card-bg) !important;
}

/* Text colors */
.text-gray-900 {
    color: var(--text-primary) !important;
}

.text-gray-700 {
    color: var(--text-secondary) !important;
}

.text-gray-600, .text-gray-500 {
    color: var(--text-tertiary) !important;
}

/* Borders */
.border-gray-200, .border-gray-300 {
    border-color: var(--border-color) !important;
}

/* Hover states */
.hover\:bg-gray-50:hover, .hover\:bg-gray-100:hover {
    background-color: var(--hover-bg) !important;
}

/* Inputs and textareas */
input, textarea, select {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

input::placeholder, textarea::placeholder {
    color: var(--text-tertiary);
}

/* Keep tom-green color consistent */
.bg-tom-green {
    background-color: var(--tom-green) !important;
}

.text-tom-green {
    color: var(--tom-green) !important;
}

.text-tom-light-green {
    color: var(--tom-light-green) !important;
}

.text-tom-dark {
    color: var(--tom-dark) !important;
}

/* Shadows */
.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-xl, .hover\:shadow-xl:hover {
    box-shadow: var(--shadow-xl) !important;
}

/* Hero section gradient adjustment for dark mode */
[data-theme="dark"] .bg-gradient-to-br {
    background: linear-gradient(to bottom right, 
        rgba(17, 24, 39, 0.9), 
        rgba(31, 41, 55, 0.8), 
        rgba(55, 65, 81, 0.7));
}

/* Footer */
footer {
    background-color: var(--bg-secondary);
    border-top-color: var(--border-color);
}

/* Dropdown menus */
[data-theme="dark"] .group:hover .group-hover\:block {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

/* Custom dropdown */
[data-theme="dark"] .custom-select-options {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .custom-select-options .option:hover {
    background-color: var(--hover-bg);
}

/* Ensure white backgrounds in dark mode for special elements */
[data-theme="dark"] .bg-red-500,
[data-theme="dark"] .bg-green-500,
[data-theme="dark"] .bg-blue-500 {
    /* Keep these colors as is */
}

/* Smooth transitions for theme switching */
*, *::before, *::after {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Exception: Don't transition these properties */
.transition-transform, .transition-all, img, video {
    transition-property: transform, opacity !important;
}