/* 
 * Metallura Website - Theme System
 * Dark Mode and Light Mode Support
 */

/* Dark Theme Variables */
.dark-theme {
  --white: #1a1a1a;
  --light-gray: #2d2d2d;
  --medium-gray: #b0b0b0;
  --dark-gray: #e0e0e0;
  --black: #ffffff;
  
  /* Override specific colors for dark mode */
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
  --text-muted: #888888;
  
  /* Cards and surfaces */
  --card-bg: #2d2d2d;
  --card-border: rgba(255, 255, 255, 0.1);
  
  /* Shadows for dark theme */
  --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-heavy: 0 8px 40px rgba(0, 0, 0, 0.5);
}

/* Light Theme Variables (Default) */
.light-theme {
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --text-primary: #343a40;
  --text-secondary: #6c757d;
  --text-muted: #6c757d;
  
  /* Cards and surfaces */
  --card-bg: #ffffff;
  --card-border: rgba(0, 0, 0, 0.1);
}

/* Apply theme colors to body */
.dark-theme body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

.light-theme body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* Header Theme Adjustments */
.dark-theme .main-header {
  background: rgba(45, 45, 45, 0.95);
}

.light-theme .main-header {
  background: rgba(26, 35, 50, 0.95);
}

/* Section Backgrounds */
.dark-theme .services-section,
.dark-theme .products-section {
  background: var(--bg-secondary);
}

.light-theme .services-section,
.light-theme .products-section {
  background: var(--light-gray);
}

/* Card Themes */
.dark-theme .service-card,
.dark-theme .product-card,
.dark-theme .contact-card,
.dark-theme .contact-form {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text-primary);
}

.light-theme .service-card,
.light-theme .product-card,
.light-theme .contact-card,
.light-theme .contact-form {
  background: var(--card-bg);
  color: var(--text-primary);
}

/* Text Color Adjustments */
.dark-theme h1,
.dark-theme h2,
.dark-theme h3,
.dark-theme h4,
.dark-theme h5,
.dark-theme h6 {

}

.dark-theme p,
.dark-theme .service-description,
.dark-theme .product-description,
.dark-theme .contact-text,
.dark-theme .about-text p {
  color: var(--text-secondary);
}

.dark-theme .section-title {
  color: var(--text-primary);
}

.dark-theme .section-subtitle {
  color: var(--text-secondary);
}

/* Form Elements Dark Theme */
.dark-theme .form-input,
.dark-theme .form-textarea {
  background: var(--bg-secondary);
  border-color: var(--card-border);
  color: var(--text-primary);
}

.dark-theme .form-input::placeholder,
.dark-theme .form-textarea::placeholder {
  color: var(--text-muted);
}

.dark-theme .form-label {
  color: var(--text-primary);
}

/* Dropdown Menus Dark Theme */
.dark-theme .dropdown-menu,
.dark-theme .lang-menu {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}

.dark-theme .dropdown-link,
.dark-theme .lang-option {
  color: var(--text-primary);
}

.dark-theme .dropdown-link:hover,
.dark-theme .lang-option:hover,
.dark-theme .lang-option.active {
  background: var(--bg-secondary);
  color: var(--copper);
}

/* Mobile Navigation Dark Theme */
.dark-theme .mobile-nav-overlay {
  background: var(--bg-primary);
}

.dark-theme .mobile-nav-link {
  color: var(--text-primary);
  border-bottom-color: var(--card-border);
}

.dark-theme .mobile-nav-link:hover {
  color: var(--copper);
}

/* Footer Dark Theme Adjustments */
.dark-theme .main-footer {
  background: var(--white) !important;
}

/* About Image Overlay Dark Theme */
.dark-theme .about-image-overlay {
  background: rgba(45, 45, 45, 0.8);
}

/* Product Overlay Dark Theme */
.dark-theme .product-overlay {
  background: linear-gradient(135deg, rgba(45, 45, 45, 0.9), rgba(184, 115, 51, 0.7));
}

/* Stat Numbers Dark Theme */
.dark-theme .stat-number {
  color: var(--copper-light);
}

.dark-theme .stat-label {
  color: var(--text-secondary);
}

/* Contact Cards Dark Theme */
.dark-theme .contact-title {
  color: var(--text-primary);
}

/* Theme Transition */
body,
.main-header,
.service-card,
.product-card,
.contact-card,
.contact-form,
.form-input,
.form-textarea,
.dropdown-menu,
.lang-menu,
.mobile-nav-overlay {
  transition: background-color var(--transition-normal), 
              color var(--transition-normal), 
              border-color var(--transition-normal);
}

/* Theme Toggle Animation */
.theme-toggle {
  overflow: hidden;
}

.theme-toggle .dark-icon,
.theme-toggle .light-icon {
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

/* Smooth theme switching */
.dark-theme .theme-toggle .dark-icon {
  opacity: 0;
  transform: rotate(180deg);
}

.dark-theme .theme-toggle .light-icon {
  opacity: 1;
  transform: rotate(0deg);
}

.light-theme .theme-toggle .dark-icon {
  opacity: 1;
  transform: rotate(0deg);
}

.light-theme .theme-toggle .light-icon {
  opacity: 0;
  transform: rotate(-180deg);
}

/* Special Dark Theme Adjustments for Hero */
.dark-theme .hero-video-overlay {
  background: linear-gradient(135deg, rgba(26, 26, 26, 0.8) 0%, rgba(45, 45, 45, 0.6) 100%);
}

/* Ensure copper color consistency across themes */
.dark-theme .hero-cta-btn,
.dark-theme .form-submit,
.dark-theme .back-to-top {
  background: var(--copper);
}

.dark-theme .hero-cta-btn:hover,
.dark-theme .form-submit:hover,
.dark-theme .back-to-top:hover {
  background: var(--copper-dark);
}

/* Service Icon Dark Theme */
.dark-theme .service-icon {
  background: linear-gradient(135deg, var(--copper), var(--copper-light));
}

/* Contact Icon Dark Theme */
.dark-theme .contact-icon {
  background: var(--copper);
}

/* Feature Tags Dark Theme */
.dark-theme .feature-tag {
  background: var(--copper);
  color: var(--white);
}

/* Social Links Dark Theme */
.dark-theme .social-link {
  background: rgba(255, 255, 255, 0.1);
}

.dark-theme .social-link:hover {
  background: var(--copper);
}

/* Navigation Active States Dark Theme */
.dark-theme .nav-link:hover,
.dark-theme .nav-link.active {
  color: var(--copper-light);
}

.dark-theme .nav-link::after {
  background: var(--copper-light);
}

/* Logo Dark Theme Adjustments */
.dark-theme .logo-text {
  color: var(--white);
}

/* Scroll Indicator Dark Theme */
.dark-theme .scroll-indicator {
  color: rgba(255, 255, 255, 0.9);
}

/* System Preference Detection */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
  
  /* Apply dark theme by default if user prefers dark mode */
  body:not(.light-theme):not(.dark-theme) {
    --white: #1a1a1a;
    --light-gray: #2d2d2d;
    --medium-gray: #b0b0b0;
    --dark-gray: #e0e0e0;
    --black: #ffffff;
    background-color: #1a1a1a;
    color: #ffffff;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .dark-theme,
  .light-theme {
    --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.8);
    --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.9);
    --shadow-heavy: 0 8px 40px rgba(0, 0, 0, 1);
  }
  
  .dark-theme .card-border {
    border-color: rgba(255, 255, 255, 0.3);
  }
  
  .light-theme .card-border {
    border-color: rgba(0, 0, 0, 0.3);
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle .dark-icon,
  .theme-toggle .light-icon,
  body,
  .main-header,
  .service-card,
  .product-card,
  .contact-card,
  .contact-form,
  .form-input,
  .form-textarea,
  .dropdown-menu,
  .lang-menu,
  .mobile-nav-overlay {
    transition: none;
  }
}