/* Dark Theme */
[data-theme="dark"] {
  --color-primary: #3b82f6;
  --color-primary-rgb: 59, 130, 246;
  --color-secondary: #8b5cf6;
  --color-accent: #10b981;
  --color-neutral: #1f2937;
  --color-background: #111827;
  --color-text: #e5e7eb;
  --color-text-light: #9ca3af;
  --color-text-meta: #6b7280;
  --color-white: #1f2937;
  --color-border: #374151;
  --color-card-bg: #1f2937;
  --color-header-bg: rgba(31, 41, 55, 0.6);
  --color-footer-bg: #0f172a;
  --color-hero-bg: linear-gradient(135deg, #111827 0%, rgba(59, 130, 246, 0.1) 100%);
  --color-download-bg: linear-gradient(135deg, #111827 0%, rgba(59, 130, 246, 0.1) 100%);
  
  /* Navigation Slider Colors - Dark Theme */
  --color-nav-slider-start: rgba(59, 130, 246, 0.15);
  --color-nav-slider-end: rgba(59, 130, 246, 0.08);
  --color-nav-slider-shadow-primary: rgba(59, 130, 246, 0.25);
  --color-nav-slider-shadow-secondary: rgba(59, 130, 246, 0.12);
}

/* Auto Theme - follows system preference */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --color-primary: #3b82f6;
    --color-primary-rgb: 59, 130, 246;
    --color-secondary: #8b5cf6;
    --color-accent: #10b981;
    --color-neutral: #1f2937;
    --color-background: #111827;
    --color-text: #e5e7eb;
    --color-text-light: #9ca3af;
    --color-text-meta: #6b7280;
    --color-white: #1f2937;
    --color-border: #374151;
    --color-card-bg: #1f2937;
    --color-header-bg: rgba(31, 41, 55, 0.8);
    --color-footer-bg: #0f172a;
    --color-hero-bg: linear-gradient(135deg, #111827 0%, rgba(59, 130, 246, 0.1) 100%);
    --color-download-bg: linear-gradient(135deg, #111827 0%, rgba(59, 130, 246, 0.1) 100%);
    
    /* Navigation Slider Colors - Auto Theme Dark Mode */
    --color-nav-slider-start: rgba(59, 130, 246, 0.15);
    --color-nav-slider-end: rgba(59, 130, 246, 0.08);
    --color-nav-slider-shadow-primary: rgba(59, 130, 246, 0.25);
    --color-nav-slider-shadow-secondary: rgba(59, 130, 246, 0.12);
  }
}

/* Dark Theme Specific Adjustments */
[data-theme="dark"] .screenshot-placeholder {
  background: linear-gradient(135deg, var(--color-card-bg) 0%, rgba(59, 130, 246, 0.05) 100%);
  border-color: var(--color-border);
}

[data-theme="dark"] .github-link:hover {
  background-color: #f6f8fa;
  color: #24292e;
  border-color: #f6f8fa;
}

[data-theme="dark"] .screenshot-placeholder:hover {
  border-color: var(--color-primary);
  background: linear-gradient(135deg, var(--color-card-bg) 0%, rgba(59, 130, 246, 0.1) 100%);
}

[data-theme="dark"] .store-badge img {
  filter: brightness(0.9) contrast(1.1);
}

[data-theme="dark"] .store-badge:hover img {
  filter: brightness(1) contrast(1);
}

/* Auto Theme - Dark Mode Adjustments */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .screenshot-placeholder {
    background: linear-gradient(135deg, var(--color-card-bg) 0%, rgba(59, 130, 246, 0.05) 100%);
    border-color: var(--color-border);
  }

  [data-theme="auto"] .screenshot-placeholder:hover {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, var(--color-card-bg) 0%, rgba(59, 130, 246, 0.1) 100%);
  }

  [data-theme="auto"] .store-badge img {
    filter: brightness(0.9) contrast(1.1);
  }

  [data-theme="auto"] .store-badge:hover img {
    filter: brightness(1) contrast(1);
  }

  [data-theme="auto"] .github-link:hover {
    background-color: #f6f8fa;
    color: #24292e;
    border-color: #f6f8fa;
  }
}

/* Theme Transition */
html {
  transition: background-color var(--transition-normal);
}

body, 
.header, 
.feature-card, 
.download-section, 
.screenshot-placeholder {
  transition: background-color var(--transition-normal), 
              color var(--transition-normal), 
              border-color var(--transition-normal);
}
/* Last Updated Styles */
.last-updated {
  color: var(--color-text-meta);
  font-size: var(--font-size-sm);
  font-style: italic;
  margin-bottom: var(--space-4);
}

.last-updated strong {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-light);
}

/* Dark theme adjustments for last updated */
[data-theme="dark"] .last-updated {
  color: var(--color-text-meta);
}

[data-theme="dark"] .last-updated strong {
  color: var(--color-text-light);
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .last-updated {
    color: var(--color-text-meta);
  }

  [data-theme="auto"] .last-updated strong {
    color: var(--color-text-light);
  }
}