/* ==========================================================================
   Theme Utilities
   Global utility styles for theme support
   ========================================================================== */

/* ==========================================================================
   Focus Ring Style
   Consistent focus ring for keyboard navigation
   ========================================================================== */

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus);
}

/* Remove focus ring for mouse users */
:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ==========================================================================
   Disabled State
   Consistent disabled styling across all elements
   ========================================================================== */

:disabled,
.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Ensure disabled buttons don't respond to hover */
button:disabled:hover,
.btn:disabled:hover,
input[type="submit"]:disabled:hover {
  background-color: inherit;
  border-color: inherit;
}

/* ==========================================================================
   Loading Shimmer Animation
   For skeleton loading states
   ========================================================================== */

@keyframes shimmer {
  0%, 100% {
    background-color: var(--color-bg-secondary);
  }
  50% {
    background-color: var(--color-bg-tertiary);
  }
}

.loading-skeleton {
  animation: shimmer 1.5s ease-in-out infinite;
}

/* Shimmer gradient alternative for larger areas */
@keyframes shimmer-gradient {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.loading-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-bg-secondary) 0%,
    var(--color-bg-tertiary) 50%,
    var(--color-bg-secondary) 100%
  );
  background-size: 200px 100%;
  animation: shimmer-gradient 1.2s ease-in-out infinite;
}

/* ==========================================================================
   Image Dark Mode Filter
   Reduces brightness/contrast of images in dark mode
   ========================================================================== */

html.dark-theme img:not([data-no-theme]):not(.no-theme-filter) {
  filter: brightness(0.85) contrast(1.05);
}

/* Exclude certain images from filtering */
html.dark-theme img.theme-aware,
html.dark-theme img[data-no-theme],
html.dark-theme img.no-theme-filter {
  filter: none;
}

/* ==========================================================================
   Text Selection
   Themed text selection highlight
   ========================================================================== */

::selection {
  background-color: var(--color-selection);
  color: var(--color-text-primary);
}

::-moz-selection {
  background-color: var(--color-selection);
  color: var(--color-text-primary);
}

/* ==========================================================================
   Link Styles
   Consistent link colors using theme variables
   ========================================================================== */

a:not(.btn):not(.button):not([class*="nav"]):not([class*="menu"]) {
  color: var(--color-link);
}

a:not(.btn):not(.button):not([class*="nav"]):not([class*="menu"]):hover {
  color: var(--color-link-hover);
}

/* ==========================================================================
   Print Styles
   Always print in light mode
   ========================================================================== */

@media print {
  :root,
  html,
  html.dark-theme {
    /* Force light theme colors for printing */
    --color-bg-primary: white !important;
    --color-bg-secondary: #f5f5f5 !important;
    --color-bg-tertiary: #efefef !important;
    --color-text-primary: #474747 !important;
    --color-text-secondary: #777777 !important;
    --color-text-muted: #888888 !important;
    --color-border-light: #eee !important;
    --color-border-medium: #ddd !important;
    --color-border-dark: #ccc !important;
  }

  /* Remove dark mode class effects */
  html.dark-theme {
    color-scheme: light !important;
  }

  /* Remove image filters for print */
  img {
    filter: none !important;
  }

  /* Remove shadows for print */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* ==========================================================================
   Form Validation Colors
   Using status colors for form feedback
   ========================================================================== */

.is-valid,
.has-success input,
.has-success textarea,
.has-success select {
  border-color: var(--color-success) !important;
}

.is-invalid,
.has-error input,
.has-error textarea,
.has-error select {
  border-color: var(--color-danger) !important;
}

.valid-feedback,
.success-message {
  color: var(--color-success);
}

.invalid-feedback,
.error-message {
  color: var(--color-danger);
}

/* ==========================================================================
   Transition Helpers
   Smooth transitions for theme changes
   ========================================================================== */

/* Apply transitions only when explicitly needed - theme changes are instant by spec */
.theme-transition * {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}