/**
 * G-SMASH V2 - Dark Mode Theme Overrides
 * Automatic detection + manual toggle support
 */

/* ============================================
   AUTO-DARK MODE (System Preference)
   ============================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Background Colors */
    --color-secondary: #1a1a1a;
    --color-secondary-bg: #0f0f0f;
    
    /* Text Colors - Lighter for contrast on dark backgrounds */
    --color-contrast: #e0e0e0;
    --color-dark-text: #ffffff;
    --color-link: #f0f0f0;
    
    /* Card Backgrounds */
    --color-white: #2a2a2a;
    
    /* Accent Colors - Adjusted for dark mode */
    --color-primary: #b0b0b0;
    
    /* Border Colors */
    --border-color-light: rgba(255, 255, 255, 0.1);
    --border-color-dark: rgba(255, 255, 255, 0.2);
  }

  /* Auto-dark component overrides */
  :root:not([data-theme="light"]) .service-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  :root:not([data-theme="light"]) .service-card-icon {
    background-color: #f5f5f5;
    border-radius: var(--radius-md);
    padding: var(--spacing-15);
  }
}

/* ============================================
   MANUAL DARK MODE (Toggle)
   ============================================ */

[data-theme="dark"] {
  /* Background Colors */
  --color-secondary: #1a1a1a;
  --color-secondary-bg: #0f0f0f;
  
  /* Text Colors - Lighter for contrast on dark backgrounds */
  --color-contrast: #e0e0e0;
  --color-dark-text: #ffffff;
  --color-link: #f0f0f0;
  
  /* Card Backgrounds */
  --color-white: #2a2a2a;
  
  /* Accent Colors - Adjusted for dark mode */
  --color-primary: #b0b0b0;
  
  /* Border Colors */
  --border-color-light: rgba(255, 255, 255, 0.1);
  --border-color-dark: rgba(255, 255, 255, 0.2);
}

/* ============================================
   DARK MODE COMPONENT OVERRIDES
   ============================================ */

/* Header */
[data-theme="dark"] #sticky-header {
  background-color: rgba(26, 26, 26, 0.87);
}

/* Footer - Already dark, but ensure text is visible */
[data-theme="dark"] .site-footer {
  background-color: #0a0a0a;
  color: #e0e0e0;
}

/* Service Cards */
[data-theme="dark"] .service-card {
  background-color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .service-card-title {
  color: var(--color-dark-text);
}

[data-theme="dark"] .service-card-text {
  color: var(--color-contrast);
}

[data-theme="dark"] .service-card-icon {
  background-color: #f5f5f5;
  border-radius: var(--radius-md);
  padding: var(--spacing-15);
}

[data-theme="dark"] .news-list-item {
  border-bottom-color: var(--border-color-light);
}

/* Navigation Links */
[data-theme="dark"] .nav-link {
  color: var(--color-dark-text);
}

/* Accent Bar - Keep visible in dark mode */
[data-theme="dark"] .accent-bar {
  background-color: #FFD700; /* Slightly different yellow for better contrast */
}

/* Buttons */
[data-theme="dark"] .btn-outline {
  border-color: var(--color-dark-text);
  color: var(--color-dark-text);
}

[data-theme="dark"] .btn-outline:hover {
  background-color: var(--color-dark-text);
  color: var(--color-secondary);
}

/* Links */
[data-theme="dark"] a {
  color: var(--color-link);
}

[data-theme="dark"] a:hover {
  color: var(--color-primary);
}

/* Form Inputs */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] textarea {
  background-color: var(--color-white);
  border-color: var(--border-color-light);
  color: var(--color-dark-text);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* Theme Toggle Button - Dark mode overrides */
[data-theme="dark"] .theme-toggle-btn {
  background-color: var(--color-secondary-bg);
  border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .theme-toggle-btn:hover {
  background-color: rgba(255, 255, 255, 0.08);
}