@tailwind base;
@tailwind components;
@tailwind utilities;

/* Production-ready global styles */

:root {
  --background: hsl(0, 0%, 100%);
  --foreground: hsl(20, 14.3%, 4.1%);
  --muted: hsl(60, 4.8%, 95.9%);
  --muted-foreground: hsl(25, 5.3%, 44.7%);
  --popover: hsl(0, 0%, 100%);
  --popover-foreground: hsl(20, 14.3%, 4.1%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(20, 14.3%, 4.1%);
  --border: hsl(20, 5.9%, 90%);
  --input: hsl(20, 5.9%, 90%);
  --primary: hsl(207, 90%, 54%);
  --primary-foreground: hsl(211, 100%, 99%);
  --secondary: hsl(151, 55%, 41.5%);
  --secondary-foreground: hsl(0, 0%, 100%);
  --accent: hsl(0, 84.2%, 60.2%);
  --accent-foreground: hsl(0, 0%, 100%);
  --destructive: hsl(0, 84.2%, 60.2%);
  --destructive-foreground: hsl(60, 9.1%, 97.8%);
  --ring: hsl(20, 14.3%, 4.1%);
  --radius: 0.5rem;
}

.dark {
  --background: hsl(240, 10%, 3.9%);
  --foreground: hsl(0, 0%, 98%);
  --muted: hsl(240, 3.7%, 15.9%);
  --muted-foreground: hsl(240, 5%, 64.9%);
  --popover: hsl(240, 10%, 3.9%);
  --popover-foreground: hsl(0, 0%, 98%);
  --card: hsl(240, 10%, 3.9%);
  --card-foreground: hsl(0, 0%, 98%);
  --border: hsl(240, 3.7%, 15.9%);
  --input: hsl(240, 3.7%, 15.9%);
  --primary: hsl(207, 90%, 54%);
  --primary-foreground: hsl(211, 100%, 99%);
  --secondary: hsl(151, 55%, 41.5%);
  --secondary-foreground: hsl(0, 0%, 100%);
  --accent: hsl(0, 84.2%, 60.2%);
  --accent-foreground: hsl(0, 0%, 100%);
  --destructive: hsl(0, 62.8%, 30.6%);
  --destructive-foreground: hsl(0, 0%, 98%);
  --ring: hsl(240, 4.9%, 83.9%);
  --radius: 0.5rem;
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply font-sans antialiased bg-background text-foreground;
  }
}

/* Custom styles for corporate marathon theme */
.hero-gradient {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent);
}

.sponsor-card {
  transition: transform 0.2s ease-in-out;
}

.sponsor-card:hover {
  transform: translateY(-2px);
}

/* Modern flat design adjustments */
.modern-flat {
  box-shadow: none;
  border: none;
}

/* Custom dropdown menu styling */
.dropdown-menu-item {
  border-radius: 0 !important;
}

.dropdown-menu-item:focus {
  background-color: hsl(207, 90%, 54%) !important;
  color: white !important;
}

.dropdown-menu-item[data-highlighted] {
  background-color: hsl(207, 90%, 54%) !important;
  color: white !important;
}

/* Override default focus styles for dropdown items removed */

/* Gallery specific tab styling - only for tab buttons */
.gallery-tab[data-state="active"] {
  background-color: hsl(207, 90%, 54%) !important;
  color: white !important;
}

/* Ensure only tab triggers get active styling, not content */
[role="tab"][data-state="active"] {
  background-color: hsl(207, 90%, 54%) !important;
  color: white !important;
}

/* Remove focus color from FAQ accordion headers */
[data-radix-accordion-trigger]:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Remove focus ring from accordion triggers */
.accordion-trigger:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Responsive design improvements */
@media (max-width: 640px) {
  .hero-slider img {
    object-position: center center;
  }
  
  .race-category-card {
    min-height: 320px;
  }
  
  .partner-logo {
    max-height: 40px;
  }
}