/* Dark Mode Implementation
 * Auto-detects user preference and provides toggle
 * Follows system preferences by default
 */

:root {
  /* Light mode (default) colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #e0e0e0;
  --text-primary: #212121;
  --text-secondary: #757575;
  --text-tertiary: #9e9e9e;
  --border-color: #e0e0e0;
  --link-color: #1976d2;
  --link-hover: #1565c0;
  --success-color: #4caf50;
  --error-color: #f44336;
  --warning-color: #ff9800;
  --card-shadow: rgba(0, 0, 0, 0.1);
  --overlay-bg: rgba(255, 255, 255, 0.95);
}

/* Dark mode colors */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --bg-tertiary: #2c2c2c;
    --text-primary: #ffffff;
    --text-secondary: #b3b3b3;
    --text-tertiary: #808080;
    --border-color: #373737;
    --link-color: #64b5f6;
    --link-hover: #42a5f5;
    --success-color: #66bb6a;
    --error-color: #ef5350;
    --warning-color: #ffa726;
    --card-shadow: rgba(0, 0, 0, 0.5);
    --overlay-bg: rgba(18, 18, 18, 0.95);
  }
}

/* Manual dark mode toggle (overrides system preference) */
[data-theme="dark"] {
  --bg-primary: #121212;
  --bg-secondary: #1e1e1e;
  --bg-tertiary: #2c2c2c;
  --text-primary: #ffffff;
  --text-secondary: #b3b3b3;
  --text-tertiary: #808080;
  --border-color: #373737;
  --link-color: #64b5f6;
  --link-hover: #42a5f5;
  --success-color: #66bb6a;
  --error-color: #ef5350;
  --warning-color: #ffa726;
  --card-shadow: rgba(0, 0, 0, 0.5);
  --overlay-bg: rgba(18, 18, 18, 0.95);
}

[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #e0e0e0;
  --text-primary: #212121;
  --text-secondary: #757575;
  --text-tertiary: #9e9e9e;
  --border-color: #e0e0e0;
  --link-color: #1976d2;
  --link-hover: #1565c0;
  --success-color: #4caf50;
  --error-color: #f44336;
  --warning-color: #ff9800;
  --card-shadow: rgba(0, 0, 0, 0.1);
  --overlay-bg: rgba(255, 255, 255, 0.95);
}

/* Apply CSS variables to elements */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.card, .meme-card, .collection-card {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 4px var(--card-shadow);
}

a {
  color: var(--link-color);
}

a:hover {
  color: var(--link-hover);
}

.btn-primary {
  background-color: var(--link-color);
  border-color: var(--link-color);
}

.btn-primary:hover {
  background-color: var(--link-hover);
  border-color: var(--link-hover);
}

.text-muted {
  color: var(--text-secondary) !important;
}

/* Dark mode toggle button */
.theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 24px;
  z-index: 1000;
  box-shadow: 0 2px 8px var(--card-shadow);
  transition: transform 0.2s ease;
}

.theme-toggle:hover {
  transform: scale(1.1);
}

.theme-toggle:active {
  transform: scale(0.95);
}

/* Smooth transitions for theme changes */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Special dark mode handling for images */
@media (prefers-color-scheme: dark) {
  img:not(.no-dark-filter) {
    opacity: 0.9;
  }
}

[data-theme="dark"] img:not(.no-dark-filter) {
  opacity: 0.9;
}

/* Code blocks in dark mode */
pre, code {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

/* Forms in dark mode */
input, textarea, select {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

input::placeholder, textarea::placeholder {
  color: var(--text-tertiary);
}

/* Dark mode accessibility - ensure sufficient contrast */
@media (prefers-color-scheme: dark) {
  /* Increase contrast for better readability */
  :focus-visible {
    outline: 2px solid var(--link-color);
    outline-offset: 2px;
  }
}