:root { /* Colors */ --primary-color: #FF9800; --primary-dark: #F57C00; --secondary-color: #2196F3; --success-color: #4CAF50; --error-color: #F44336; --warning-color: #FFC107; --text-primary: #212121; --text-secondary: #757575; --background: #F5F5F5; --white: #FFFFFF; /* Spacing */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; /* Border Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; /* Shadows */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); /* Transitions */ --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; /* Font */ --font-size-lg: 1.5rem; --surface: #FFFFFF; --surface-variant: #FFFFFF; --border-color: rgba(0, 0, 0, 0.1); --card-background: #FFFFFF; --glass-background: rgba(255, 255, 255, 0.9); --glass-border: rgba(255, 255, 255, 0.2); --shadow-color: rgba(0, 0, 0, 0.1); } /* Theme Styles */ [data-theme="dark"] { --text-primary: #FFFFFF; --text-secondary: #B0B0B0; --background: #121212; --surface: #1E1E1E; --surface-variant: #2D2D2D; --border-color: rgba(255, 255, 255, 0.1); --card-background: #1E1E1E; --glass-background: rgba(30, 30, 30, 0.9); --glass-border: rgba(255, 255, 255, 0.1); --shadow-color: rgba(0, 0, 0, 0.3); --footer-background: #1E1E1E; } /* Theme Toggle Button */ #themeToggle { position: relative; overflow: hidden; } #themeToggle i { transition: transform 0.5s ease; } [data-theme="dark"] #themeToggle i.fa-moon { display: none; } [data-theme="dark"] #themeToggle i.fa-sun { display: inline-block; } /* Dark Mode Adjustments */ [data-theme="dark"] .logo img { filter: brightness(0) invert(1); } [data-theme="dark"] .hero { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../assets/images/hero-bg.webp'); } [data-theme="dark"] .product-card { box-shadow: 0 4px 6px var(--shadow-color); } [data-theme="dark"] .product-card:hover { box-shadow: 0 8px 15px var(--shadow-color); } [data-theme="dark"] .nav-btn:hover { background: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .category-filter:hover:not(.active) { background: var(--surface-variant); } [data-theme="dark"] .product-tag { background: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .footer-logo { filter: brightness(0) invert(1); } /* Loading States */ [data-theme="dark"] .loading::after { background: rgba(0, 0, 0, 0.8); } /* Notifications */ [data-theme="dark"] .notification { background: var(--surface); border: 1px solid var(--border-color); } /* Additional Adjustments */ .nav-btn { border: 1px solid transparent; } [data-theme="dark"] .nav-btn { border-color: var(--border-color); } .search-bar input { background: var(--surface); color: var(--text-primary); } [data-theme="dark"] .search-bar input::placeholder { color: var(--text-secondary); } .feature-card { background: var(--surface); border: 1px solid var(--border-color); } [data-theme="dark"] .feature-card:hover { background: var(--surface-variant); } /* Smooth Transitions */ body { transition: background-color 0.3s ease; } .theme-transition { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* High Contrast Support */ @media (prefers-contrast: high) { [data-theme="dark"] { --text-primary: #FFFFFF; --text-secondary: #FFFFFF; --border-color: #FFFFFF; } } /* Reduced Motion */ @media (prefers-reduced-motion: reduce) { .theme-transition { transition: none !important; } }