@import "tailwindcss";

@variant dark (&:where(.dark, .dark *));

/* Enhanced focus states for accessibility */
@layer base {
  /* Ensure visible focus rings on interactive elements */
  a:focus-visible,
  button:focus-visible,
  [role="button"]:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2 ring-offset-white dark:ring-offset-gray-900;
  }

  /* Remove default focus outline when ring is applied */
  :focus {
    outline: none;
  }

  /* Skip link styles */
  .sr-only:focus-visible {
    @apply not-sr-only;
  }
}

/* Subtle animations and transitions */
@layer components {
  /* Smooth hover transitions for list items and cards */
  li[class*="hover:"],
  div[class*="hover:bg-"] {
    @apply transition-colors duration-150 ease-in-out;
  }

  /* Smooth link transitions */
  a {
    @apply transition-colors duration-150 ease-in-out;
  }

  /* Button hover transitions */
  button,
  [type="submit"],
  [role="button"] {
    @apply transition-all duration-150 ease-in-out;
  }

  /* Card shadow transitions */
  .shadow-sm {
    @apply transition-shadow duration-200 ease-in-out;
  }

  /* Details/summary smooth toggle */
  details summary {
    @apply cursor-pointer select-none;
  }

  details summary::-webkit-details-marker {
    display: none;
  }

  /* Badge transitions */
  span[class*="rounded-full"] {
    @apply transition-all duration-200 ease-in-out;
  }
}