/**
 * Theme System - Light and Dark Mode Support
 * Provides CSS custom properties for theme switching
 */

:root {
  /* Light mode (default) */
  --theme-background-primary: var(--color-neutral-white);
  --theme-background-secondary: var(--color-neutral-gray-50);
  --theme-background-tertiary: var(--color-neutral-gray-100);

  --theme-text-primary: var(--color-neutral-gray-900);
  --theme-text-secondary: var(--color-neutral-gray-600);
  --theme-text-tertiary: var(--color-neutral-gray-500);

  --theme-border-primary: var(--color-neutral-gray-300);
  --theme-border-secondary: var(--color-neutral-gray-200);

  --theme-surface-primary: var(--color-neutral-white);
  --theme-surface-secondary: var(--color-neutral-gray-50);

  --theme-overlay: rgba(0, 0, 0, 0.5);
  --theme-shadow: var(--shadow-md);

  --theme-focus-ring: var(--color-brand-primary);

  /* Interactive states */
  --theme-hover-overlay: rgba(0, 102, 255, 0.1);
  --theme-active-overlay: rgba(0, 102, 255, 0.15);
  --theme-disabled-overlay: rgba(0, 0, 0, 0.08);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --theme-background-primary: var(--color-neutral-gray-900);
    --theme-background-secondary: var(--color-neutral-gray-800);
    --theme-background-tertiary: var(--color-neutral-gray-700);

    --theme-text-primary: var(--color-neutral-white);
    --theme-text-secondary: var(--color-neutral-gray-300);
    --theme-text-tertiary: var(--color-neutral-gray-400);

    --theme-border-primary: var(--color-neutral-gray-700);
    --theme-border-secondary: var(--color-neutral-gray-600);

    --theme-surface-primary: var(--color-neutral-gray-800);
    --theme-surface-secondary: var(--color-neutral-gray-700);

    --theme-overlay: rgba(0, 0, 0, 0.7);
    --theme-shadow: var(--shadow-lg);

    --theme-focus-ring: var(--color-brand-primary);

    /* Interactive states */
    --theme-hover-overlay: rgba(0, 102, 255, 0.15);
    --theme-active-overlay: rgba(0, 102, 255, 0.2);
    --theme-disabled-overlay: rgba(255, 255, 255, 0.08);
  }
}

/* Explicit light mode override */
:root[data-theme="light"] {
  --theme-background-primary: var(--color-neutral-white);
  --theme-background-secondary: var(--color-neutral-gray-50);
  --theme-background-tertiary: var(--color-neutral-gray-100);

  --theme-text-primary: var(--color-neutral-gray-900);
  --theme-text-secondary: var(--color-neutral-gray-600);
  --theme-text-tertiary: var(--color-neutral-gray-500);

  --theme-border-primary: var(--color-neutral-gray-200);
  --theme-border-secondary: var(--color-neutral-gray-100);

  --theme-surface-primary: var(--color-neutral-white);
  --theme-surface-secondary: var(--color-neutral-gray-50);

  --theme-overlay: rgba(0, 0, 0, 0.5);
  --theme-shadow: var(--shadow-md);

  --theme-focus-ring: var(--color-brand-primary);

  --theme-hover-overlay: rgba(0, 102, 255, 0.1);
  --theme-active-overlay: rgba(0, 102, 255, 0.15);
  --theme-disabled-overlay: rgba(0, 0, 0, 0.08);
}

/* Explicit dark mode override */
:root[data-theme="dark"] {
  --theme-background-primary: var(--color-neutral-gray-900);
  --theme-background-secondary: var(--color-neutral-gray-800);
  --theme-background-tertiary: var(--color-neutral-gray-700);

  --theme-text-primary: var(--color-neutral-white);
  --theme-text-secondary: var(--color-neutral-gray-300);
  --theme-text-tertiary: var(--color-neutral-gray-400);

  --theme-border-primary: var(--color-neutral-gray-700);
  --theme-border-secondary: var(--color-neutral-gray-600);

  --theme-surface-primary: var(--color-neutral-gray-800);
  --theme-surface-secondary: var(--color-neutral-gray-700);

  --theme-overlay: rgba(0, 0, 0, 0.7);
  --theme-shadow: var(--shadow-lg);

  --theme-focus-ring: var(--color-brand-primary);

  --theme-hover-overlay: rgba(0, 102, 255, 0.15);
  --theme-active-overlay: rgba(0, 102, 255, 0.2);
  --theme-disabled-overlay: rgba(255, 255, 255, 0.08);
}

/* High contrast mode adjustments */
@media (prefers-contrast: more) {
  :root {
    --theme-text-secondary: var(--color-neutral-gray-700);
    --theme-border-primary: var(--color-neutral-gray-400);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --theme-text-secondary: var(--color-neutral-white);
      --theme-border-primary: var(--color-neutral-gray-400);
    }
  }

  :root[data-theme="dark"] {
    --theme-text-secondary: var(--color-neutral-white);
    --theme-border-primary: var(--color-neutral-gray-400);
  }
}

/* Base element styles using theme variables */
html {
  background-color: var(--theme-background-primary);
  color: var(--theme-text-primary);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

body {
  background-color: var(--theme-background-primary);
  color: var(--theme-text-primary);
  transition: background-color var(--animation-duration-normal) var(--animation-easing-ease-in-out),
              color var(--animation-duration-normal) var(--animation-easing-ease-in-out);
}

/* Text elements */
h1, h2, h3, h4, h5, h6 {
  color: var(--theme-text-primary);
}

p, label, li {
  color: var(--theme-text-primary);
}

small, .text-secondary {
  color: var(--theme-text-secondary);
}

.text-tertiary {
  color: var(--theme-text-tertiary);
}

/* Form elements */
input,
textarea,
select {
  background-color: var(--theme-surface-primary);
  border-color: var(--theme-border-primary);
  color: var(--theme-text-primary);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--theme-focus-ring);
  box-shadow: 0 0 0 3px var(--theme-hover-overlay);
}

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

/* Buttons */
button,
a.button {
  background-color: var(--theme-surface-secondary);
  border-color: var(--theme-border-primary);
  color: var(--theme-text-primary);
  transition: background-color var(--animation-duration-normal) var(--animation-easing-ease-in-out),
              color var(--animation-duration-normal) var(--animation-easing-ease-in-out),
              border-color var(--animation-duration-normal) var(--animation-easing-ease-in-out);
}

button:hover,
a.button:hover {
  background-color: var(--theme-hover-overlay);
}

button:active,
a.button:active {
  background-color: var(--theme-active-overlay);
}

button:disabled,
a.button:disabled,
a.button[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Cards and containers */
.card,
.container,
.panel {
  background-color: var(--theme-surface-primary);
  border-color: var(--theme-border-primary);
  color: var(--theme-text-primary);
  box-shadow: var(--theme-shadow);
}

/* Links */
a {
  color: var(--color-brand-primary);
}

a:visited {
  color: var(--color-neutral-gray-600);
}

a:hover {
  opacity: 0.8;
}

a:focus {
  outline: 2px solid var(--theme-focus-ring);
  outline-offset: 2px;
}

/* Separator/divider elements */
hr,
.divider {
  border-color: var(--theme-border-primary);
}

/* Code blocks */
code,
pre {
  background-color: var(--theme-background-secondary);
  border-color: var(--theme-border-secondary);
  color: var(--theme-text-primary);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  body,
  input,
  textarea,
  select,
  button,
  a.button,
  .card,
  .container,
  .panel {
    transition: none;
  }
}

/* Print styles */
@media print {
  :root,
  :root[data-theme="light"],
  :root[data-theme="dark"] {
    --theme-background-primary: var(--color-neutral-white);
    --theme-text-primary: var(--color-neutral-gray-900);
    --theme-text-secondary: var(--color-neutral-gray-600);
    --theme-border-primary: var(--color-neutral-gray-300);
  }

  html, body {
    background-color: white;
    color: black;
  }
}