/* ==========================================================================
   Theme System - Light/Dark Mode
   ========================================================================== */

/* Theme transition for smooth switching */
body,
.header,
.card,
.service-card,
.pillar-card,
.case-card,
.partner-card,
.insight-card,
.footer {
  transition: background-color var(--duration-base) var(--ease-in-out),
              color var(--duration-base) var(--ease-in-out),
              border-color var(--duration-base) var(--ease-in-out);
}

/* ==========================================================================
   LIGHT THEME (Default)
   ========================================================================== */

:root,
[data-theme="light"] {
  /* Already defined in variables.css */
}

/* ==========================================================================
   DARK THEME
   ========================================================================== */

[data-theme="dark"] {
  /* Variables are already overridden in variables.css */
}

/* Dark theme specific component adjustments */
[data-theme="dark"] .hero-section {
  background: linear-gradient(135deg, #0A0A14 0%, #0F0F1E 100%);
}

[data-theme="dark"] .hero-overlay {
  background: linear-gradient(135deg, 
    rgba(123, 99, 197, 0.2) 0%, 
    rgba(10, 10, 20, 0.95) 100%
  );
}

[data-theme="dark"] .pillar-card,
[data-theme="dark"] .service-card,
[data-theme="dark"] .case-card,
[data-theme="dark"] .partner-card,
[data-theme="dark"] .insight-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .pillar-card:hover,
[data-theme="dark"] .service-card:hover,
[data-theme="dark"] .case-card:hover,
[data-theme="dark"] .partner-card:hover,
[data-theme="dark"] .insight-card:hover {
  border-color: var(--color-primary);
}

[data-theme="dark"] .service-icon {
  background: linear-gradient(135deg, rgba(123, 99, 197, 0.2) 0%, rgba(123, 99, 197, 0.3) 100%);
}

[data-theme="dark"] .case-results {
  background: rgba(26, 26, 46, 0.5);
}

[data-theme="dark"] .clients-section,
[data-theme="dark"] .pillars-section,
[data-theme="dark"] .insights-section {
  background: var(--color-background);
}

[data-theme="dark"] .services-section,
[data-theme="dark"] .partners-section {
  background: var(--color-background-alt);
}

[data-theme="dark"] .footer {
  background: var(--color-background);
}

/* Theme Toggle Button */
.theme-toggle i {
  transition: transform 0.3s ease;
}

/* Smooth icon rotation on theme change */
.theme-toggle.switching i {
  transform: rotate(360deg);
}

/* ==========================================================================
   THEME PREFERENCE INDICATION
   ========================================================================== */

/* Add subtle glow to theme toggle when active */
[data-theme="dark"] .theme-toggle {
  background: rgba(123, 99, 197, 0.15);
  color: var(--color-gray-200);
}

[data-theme="dark"] .theme-toggle:hover {
  background: var(--color-primary);
  color: white;
}

/* ==========================================================================
   DARK MODE - GLOBAL OVERRIDES
   ========================================================================== */

[data-theme="dark"] body {
  background: var(--bg-dark);
  color: var(--color-gray-200);
}

[data-theme="dark"] .section {
  background: var(--bg-dark);
}

[data-theme="dark"] .section-light {
  background: var(--bg-dark-secondary);
}

[data-theme="dark"] .section-header h2,
[data-theme="dark"] .content-text h2 {
  color: white;
}

[data-theme="dark"] .section-header p,
[data-theme="dark"] .content-text p {
  color: var(--color-gray-400);
}

/* Header Dark Mode */
[data-theme="dark"] .header {
  background: rgba(10, 10, 20, 0.95);
  border-bottom-color: var(--border-color-dark);
}

[data-theme="dark"] .header.scrolled {
  background: rgba(10, 10, 20, 0.98);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .logo span {
  color: white;
}

[data-theme="dark"] .nav-link {
  color: var(--color-gray-300);
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
  color: white;
}

/* Mega Menu Dark Mode */
[data-theme="dark"] .mega-menu {
  background: var(--bg-dark-secondary);
  border-color: var(--border-color-dark);
}

[data-theme="dark"] .mega-menu-item {
  background: transparent;
}

[data-theme="dark"] .mega-menu-item:hover {
  background: rgba(123, 99, 197, 0.1);
}

[data-theme="dark"] .mega-menu-content h4 {
  color: white;
}

[data-theme="dark"] .mega-menu-content p {
  color: var(--color-gray-400);
}

/* Mobile Menu Dark Mode */
[data-theme="dark"] .mobile-menu {
  background: var(--bg-dark);
  border-top-color: var(--border-color-dark);
}

[data-theme="dark"] .mobile-menu-link {
  color: var(--color-gray-300);
  border-bottom-color: var(--border-color-dark);
}

[data-theme="dark"] .mobile-menu-link:hover,
[data-theme="dark"] .mobile-menu-link.active {
  color: white;
  background: rgba(123, 99, 197, 0.1);
}

/* Footer Dark Mode */
[data-theme="dark"] .footer {
  background: var(--bg-dark);
  border-top-color: var(--border-color-dark);
}

[data-theme="dark"] .footer-title {
  color: white;
}

[data-theme="dark"] .footer-link {
  color: var(--color-gray-400);
}

[data-theme="dark"] .footer-link:hover {
  color: var(--color-primary-light);
}

[data-theme="dark"] .footer-bottom {
  border-top-color: var(--border-color-dark);
}

/* Back to Top Dark Mode */
[data-theme="dark"] .back-to-top {
  background: var(--bg-dark-secondary);
  border-color: var(--border-color-dark);
  color: var(--color-gray-300);
}

[data-theme="dark"] .back-to-top:hover {
  background: var(--color-primary);
  color: white;
}

/* ==========================================================================
   PRINT STYLES (Always Light)
   ========================================================================== */

@media print {
  body {
    background: white !important;
    color: black !important;
  }
  
  [data-theme="dark"] * {
    background: white !important;
    color: black !important;
    border-color: #ccc !important;
  }
}

/* ==========================================================================
   PREFERS COLOR SCHEME (System Preference)
   ========================================================================== */

/* Respect user's system preference if no manual selection */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Apply dark theme variables if no explicit theme is set */
  }
}

/* ==========================================================================
   THEME TRANSITION DISABLE (For initial load)
   ========================================================================== */

.theme-transition-disabled * {
  transition: none !important;
}