/* === Themes Stylesheet === */
/* Dark mode and light mode theme definitions */

/* Dark Theme (Default) */

[data-theme="dark"] {
  --color-bg-primary: #1a1a1a;
  --color-bg-secondary: #2d2d2d;
  --color-bg-tertiary: #3a3a3a;
  --color-text-primary: #e0e0e0;
  --color-text-secondary: #a0a0a0;
  --color-text-muted: #707070;
  --color-border: #3a3a3a;
  --color-accent: #6366f1;
  --color-accent-hover: #7c3aed;
}

/* Light Theme */

[data-theme="light"] {
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f5f5f5;
  --color-bg-tertiary: #eeeeee;
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #4a4a4a;
  --color-text-muted: #888888;
  --color-border: #d4d4d4;
  --color-accent: #6366f1;
  --color-accent-hover: #4f46e5;
}

/* System preference detection */

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f5f5f5;
    --color-bg-tertiary: #eeeeee;
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #4a4a4a;
    --color-text-muted: #888888;
    --color-border: #d4d4d4;
    --color-accent: #6366f1;
    --color-accent-hover: #4f46e5;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg-primary: #1a1a1a;
    --color-bg-secondary: #2d2d2d;
    --color-bg-tertiary: #3a3a3a;
    --color-text-primary: #e0e0e0;
    --color-text-secondary: #a0a0a0;
    --color-text-muted: #707070;
    --color-border: #3a3a3a;
    --color-accent: #6366f1;
    --color-accent-hover: #7c3aed;
  }
}

/* Smooth transition when switching themes */

[data-theme] body {
  transition: background-color var(--transition-base), color var(--transition-base);
}

[data-theme] * {
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

/* Ensure consistent colors across form elements */

[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

/* Icon changes based on theme */

[data-theme="dark"] .theme-icon::before {
  content: "🌙";
}

[data-theme="light"] .theme-icon::before {
  content: "☀️";
}

/* Ensure proper contrast in both themes */

[data-theme="dark"] a {
  color: #64b5f6;
}

[data-theme="dark"] a:hover {
  color: #90caf9;
}

[data-theme="light"] a {
  color: #1976d2;
}

[data-theme="light"] a:hover {
  color: #1565c0;
}

/* Selection color */

[data-theme="dark"]::selection {
  background-color: var(--color-accent);
  color: white;
}

[data-theme="light"]::selection {
  background-color: var(--color-accent);
  color: white;
}

/* Placeholder text visibility */

[data-theme="dark"]::placeholder {
  color: var(--color-text-muted);
  opacity: 0.8;
}

[data-theme="light"]::placeholder {
  color: var(--color-text-muted);
  opacity: 0.8;
}

/* Scrollbar colors for webkit browsers */

[data-theme="dark"]::-webkit-scrollbar {
  background-color: var(--color-bg-primary);
}

[data-theme="dark"]::-webkit-scrollbar-track {
  background-color: var(--color-bg-secondary);
}

[data-theme="dark"]::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
}

[data-theme="dark"]::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-text-secondary);
}

[data-theme="light"]::-webkit-scrollbar {
  background-color: var(--color-bg-primary);
}

[data-theme="light"]::-webkit-scrollbar-track {
  background-color: var(--color-bg-secondary);
}

[data-theme="light"]::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
}

[data-theme="light"]::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-text-secondary);
}

/* Focus ring visibility */

[data-theme="dark"] *:focus-visible {
  outline-color: var(--color-accent);
}

[data-theme="light"] *:focus-visible {
  outline-color: var(--color-accent);
}

/* Ensure code blocks are visible */

[data-theme="dark"] code,
[data-theme="dark"] pre {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

[data-theme="light"] code,
[data-theme="light"] pre {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

/* High contrast mode support */

@media (prefers-contrast: more) {
  [data-theme="dark"] {
    --color-text-primary: #ffffff;
    --color-text-secondary: #cccccc;
    --color-border: #555555;
  }

  [data-theme="light"] {
    --color-text-primary: #000000;
    --color-text-secondary: #333333;
    --color-border: #999999;
  }
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}