/**
 * Dark Mode Support
 * دعم الوضع الداكن
 * Professional dark mode implementation
 */

/* ============================================
   Dark Mode Variables
   ============================================ */
:root[data-theme="dark"],
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Primary Colors - Adjusted for dark mode */
    --color-primary: #4a9eff;
    --color-primary-dark: #357abd;
    --color-primary-light: #6bb3ff;
    
    /* Text Colors */
    --color-text-primary: #e4e4e7;
    --color-text-secondary: #a1a1aa;
    --color-text-muted: #71717a;
    --color-text-light: #52525b;
    
    /* Background Colors */
    --color-bg-primary: #18181b;
    --color-bg-secondary: #27272a;
    --color-bg-tertiary: #3f3f46;
    --color-bg-dark: #09090b;
    
    /* Border Colors */
    --color-border: #3f3f46;
    --color-border-light: #27272a;
    --color-border-dark: #52525b;
    
    /* Shadows - Adjusted for dark mode */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.7);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.8);
  }
}

/* ============================================
   Dark Mode Toggle Button
   ============================================ */
.theme-toggle {
  position: relative;
  width: 50px;
  height: 26px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: background var(--transition-base);
  padding: 2px;
}

.theme-toggle::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  transition: transform var(--transition-base);
  box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .theme-toggle,
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle {
    background: var(--color-primary);
  }
  
  :root:not([data-theme="light"]) .theme-toggle::before {
    transform: translateX(24px);
  }
}

.theme-toggle-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  transition: opacity var(--transition-base);
}

.theme-toggle-icon.sun {
  left: 6px;
  opacity: 1;
}

.theme-toggle-icon.moon {
  right: 6px;
  opacity: 0;
}

[data-theme="dark"] .theme-toggle-icon.sun,
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle-icon.sun {
    opacity: 0;
  }
  
  :root:not([data-theme="light"]) .theme-toggle-icon.moon {
    opacity: 1;
  }
}

/* ============================================
   Dark Mode Specific Styles
   ============================================ */
[data-theme="dark"] body,
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
  }
}

[data-theme="dark"] .card,
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
  }
}

[data-theme="dark"] .product-card,
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .product-card {
    background: var(--color-bg-secondary);
  }
}

[data-theme="dark"] .btn-outline,
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-outline {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
  
  :root:not([data-theme="light"]) .btn-outline:hover {
    background: var(--color-primary);
    color: white;
  }
}

/* ============================================
   Smooth Theme Transition
   ============================================ */
* {
  transition: background-color 0.3s ease, 
              color 0.3s ease, 
              border-color 0.3s ease;
}

/* ============================================
   Dark Mode Images
   ============================================ */
[data-theme="dark"] img,
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img {
    opacity: 0.9;
  }
}

[data-theme="dark"] img:hover,
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img:hover {
    opacity: 1;
  }
}