/**
 * MWANGI UI Theme System
 *
 * Smooth transitions between light and dark modes with system preference support.
 * Works seamlessly with PicoCSS's built-in theme system.
 */

/* ============================================================================
   THEME TRANSITION
   Smooth color transitions when switching themes
   ============================================================================ */

:root {
  color-scheme: light dark;
}

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

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

/* Smooth transitions for theme changes */
* {
  transition: background-color var(--mw-duration-medium) var(--mw-ease-in-out),
              border-color var(--mw-duration-medium) var(--mw-ease-in-out),
              color var(--mw-duration-medium) var(--mw-ease-in-out);
}

/* Prevent transition on page load */
.preload * {
  transition: none !important;
}

/* ============================================================================
   LIGHT THEME (Explicit)
   ============================================================================ */

[data-theme="light"] {
  /* Backgrounds */
  --mw-bg-primary: #ffffff;
  --mw-bg-secondary: var(--mw-gray-50);
  --mw-bg-tertiary: var(--mw-gray-100);
  --mw-bg-elevated: #ffffff;
  --mw-bg-overlay: rgba(0, 0, 0, 0.5);

  /* Text */
  --mw-text-primary: var(--mw-gray-900);
  --mw-text-secondary: var(--mw-gray-700);
  --mw-text-tertiary: var(--mw-gray-600);
  --mw-text-disabled: var(--mw-gray-400);

  /* Borders */
  --mw-border-primary: var(--mw-gray-300);
  --mw-border-secondary: var(--mw-gray-200);
  --mw-border-subtle: var(--mw-gray-100);

  /* Interactive states */
  --mw-hover-overlay: rgba(0, 0, 0, 0.05);
  --mw-active-overlay: rgba(0, 0, 0, 0.1);

  /* Semantic colors - light mode variants */
  --mw-primary: var(--mw-primary-600);
  --mw-primary-hover: var(--mw-primary-700);
  --mw-primary-active: var(--mw-primary-800);
  --mw-primary-bg: var(--mw-primary-50);

  --mw-secondary: var(--mw-secondary-600);
  --mw-secondary-hover: var(--mw-secondary-700);
  --mw-secondary-active: var(--mw-secondary-800);
  --mw-secondary-bg: var(--mw-secondary-50);

  --mw-success: var(--mw-success-600);
  --mw-success-bg: var(--mw-success-50);
  --mw-success-border: var(--mw-success-200);

  --mw-warning: var(--mw-warning-600);
  --mw-warning-bg: var(--mw-warning-50);
  --mw-warning-border: var(--mw-warning-200);

  --mw-error: var(--mw-error-600);
  --mw-error-bg: var(--mw-error-50);
  --mw-error-border: var(--mw-error-200);

  --mw-info: var(--mw-info-600);
  --mw-info-bg: var(--mw-info-50);
  --mw-info-border: var(--mw-info-200);
}

/* ============================================================================
   DARK THEME (Explicit)
   ============================================================================ */

[data-theme="dark"] {
  /* Backgrounds - rich, deep darks */
  --mw-bg-primary: #0d1117;
  --mw-bg-secondary: #161b22;
  --mw-bg-tertiary: #1f2428;
  --mw-bg-elevated: #1f2428;
  --mw-bg-overlay: rgba(0, 0, 0, 0.7);

  /* Text - high contrast for readability */
  --mw-text-primary: var(--mw-gray-50);
  --mw-text-secondary: var(--mw-gray-300);
  --mw-text-tertiary: var(--mw-gray-400);
  --mw-text-disabled: var(--mw-gray-600);

  /* Borders - subtle but visible */
  --mw-border-primary: var(--mw-gray-700);
  --mw-border-secondary: var(--mw-gray-800);
  --mw-border-subtle: var(--mw-gray-900);

  /* Interactive states */
  --mw-hover-overlay: rgba(255, 255, 255, 0.05);
  --mw-active-overlay: rgba(255, 255, 255, 0.1);

  /* Semantic colors - dark mode variants (brighter for contrast) */
  --mw-primary: var(--mw-primary-500);
  --mw-primary-hover: var(--mw-primary-400);
  --mw-primary-active: var(--mw-primary-300);
  --mw-primary-bg: rgba(59, 130, 246, 0.1);

  --mw-secondary: var(--mw-secondary-500);
  --mw-secondary-hover: var(--mw-secondary-400);
  --mw-secondary-active: var(--mw-secondary-300);
  --mw-secondary-bg: rgba(168, 85, 247, 0.1);

  --mw-success: var(--mw-success-500);
  --mw-success-bg: rgba(16, 185, 129, 0.1);
  --mw-success-border: rgba(16, 185, 129, 0.3);

  --mw-warning: var(--mw-warning-500);
  --mw-warning-bg: rgba(245, 158, 11, 0.1);
  --mw-warning-border: rgba(245, 158, 11, 0.3);

  --mw-error: var(--mw-error-500);
  --mw-error-bg: rgba(239, 68, 68, 0.1);
  --mw-error-border: rgba(239, 68, 68, 0.3);

  --mw-info: var(--mw-info-500);
  --mw-info-bg: rgba(14, 165, 233, 0.1);
  --mw-info-border: rgba(14, 165, 233, 0.3);
}

/* ============================================================================
   SYSTEM PREFERENCE DETECTION
   Respects user's OS theme preference if no explicit theme is set
   ============================================================================ */

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    /* Apply light theme variables */
    --mw-bg-primary: #ffffff;
    --mw-bg-secondary: var(--mw-gray-50);
    --mw-bg-tertiary: var(--mw-gray-100);
    --mw-bg-elevated: #ffffff;
    --mw-bg-overlay: rgba(0, 0, 0, 0.5);

    --mw-text-primary: var(--mw-gray-900);
    --mw-text-secondary: var(--mw-gray-700);
    --mw-text-tertiary: var(--mw-gray-600);
    --mw-text-disabled: var(--mw-gray-400);

    --mw-border-primary: var(--mw-gray-300);
    --mw-border-secondary: var(--mw-gray-200);
    --mw-border-subtle: var(--mw-gray-100);

    --mw-hover-overlay: rgba(0, 0, 0, 0.05);
    --mw-active-overlay: rgba(0, 0, 0, 0.1);

    --mw-primary: var(--mw-primary-600);
    --mw-primary-hover: var(--mw-primary-700);
    --mw-primary-active: var(--mw-primary-800);
    --mw-primary-bg: var(--mw-primary-50);
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* Apply dark theme variables */
    --mw-bg-primary: #0d1117;
    --mw-bg-secondary: #161b22;
    --mw-bg-tertiary: #1f2428;
    --mw-bg-elevated: #1f2428;
    --mw-bg-overlay: rgba(0, 0, 0, 0.7);

    --mw-text-primary: var(--mw-gray-50);
    --mw-text-secondary: var(--mw-gray-300);
    --mw-text-tertiary: var(--mw-gray-400);
    --mw-text-disabled: var(--mw-gray-600);

    --mw-border-primary: var(--mw-gray-700);
    --mw-border-secondary: var(--mw-gray-800);
    --mw-border-subtle: var(--mw-gray-900);

    --mw-hover-overlay: rgba(255, 255, 255, 0.05);
    --mw-active-overlay: rgba(255, 255, 255, 0.1);

    --mw-primary: var(--mw-primary-500);
    --mw-primary-hover: var(--mw-primary-400);
    --mw-primary-active: var(--mw-primary-300);
    --mw-primary-bg: rgba(59, 130, 246, 0.1);
  }
}

/* ============================================================================
   THEME TOGGLE BUTTON STYLES
   Optional styles for theme switcher UI
   ============================================================================ */

.mw-theme-toggle {
  position: relative;
  cursor: pointer;
  background: transparent;
  border: var(--mw-border-width-1) solid var(--mw-border-primary);
  padding: var(--mw-spacing-2);
  border-radius: var(--mw-radius-md);
  transition: var(--mw-transition-colors);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
}

.mw-theme-toggle:hover {
  background: var(--mw-hover-overlay);
  border-color: var(--mw-primary);
}

.mw-theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--mw-shadow-focus);
}

/* Hide/show theme icons based on current theme */
.theme-icon-light,
.theme-icon-dark {
  font-size: var(--mw-font-size-lg);
  line-height: 1;
  display: block;
}

[data-theme="light"] .theme-icon-light,
[data-theme="dark"] .theme-icon-dark {
  display: block;
}

[data-theme="light"] .theme-icon-dark,
[data-theme="dark"] .theme-icon-light {
  display: none;
}

/* System preference without explicit theme */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-icon-light {
    display: block;
  }
  :root:not([data-theme]) .theme-icon-dark {
    display: none;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-icon-dark {
    display: block;
  }
  :root:not([data-theme]) .theme-icon-light {
    display: none;
  }
}

/* ============================================================================
   HIGH CONTRAST MODE SUPPORT
   Enhanced visibility for users who need it
   ============================================================================ */

@media (prefers-contrast: high) {
  :root {
    --mw-border-width-1: 2px;
  }

  [data-theme="light"] {
    --mw-text-primary: #000000;
    --mw-border-primary: var(--mw-gray-900);
  }

  [data-theme="dark"] {
    --mw-text-primary: #ffffff;
    --mw-border-primary: var(--mw-gray-100);
  }
}

/* ============================================================================
   REDUCED MOTION SUPPORT
   Respect user preference for reduced motion
   ============================================================================ */

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