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

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    /* VGP Brand Colors - Exact Hex Values */
    --primary: 219 36% 15%; /* Navy Blue #192335 */
    --primary-foreground: 39 51% 48%; /* Gold #B88C3C */
    --primary-light: 219 36% 20%;
    
    --secondary: 39 51% 48%; /* Gold #B88C3C */
    --secondary-foreground: 219 36% 15%; /* Navy Blue */
    
    --accent: 39 51% 48%; /* Gold #B88C3C */
    --accent-foreground: 219 36% 15%;
    
    --background: 0 0% 100%;
    --foreground: 219 36% 15%;
    
    --card: 0 0% 100%;
    --card-foreground: 219 36% 15%;
    
    --popover: 0 0% 100%;
    --popover-foreground: 219 36% 15%;
    
    --border: 220 13% 91%;
    --input: 220 13% 91%;
    
    --muted: 210 40% 98%;
    --muted-foreground: 215 16% 47%;
    
    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;
    
    --ring: 39 51% 48%;
    
    --radius: 0.75rem;
    
    /* Custom gradients */
    --gradient-primary: linear-gradient(135deg, hsl(219 36% 15%), hsl(219 36% 20%));
    --gradient-gold: linear-gradient(135deg, hsl(39 51% 45%), hsl(39 51% 52%));
    --gradient-hero: linear-gradient(135deg, hsl(219 36% 15% / 0.95), hsl(219 36% 20% / 0.85));
    
    /* Shadows */
    --shadow-elegant: 0 10px 30px -10px hsl(219 36% 15% / 0.2);
    --shadow-luxury: 0 20px 40px -10px hsl(219 36% 15% / 0.3);
    --shadow-glow: 0 0 40px hsl(39 51% 48% / 0.3);

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 219 36% 15%;
    --foreground: 0 0% 98%;
    
    --card: 219 36% 20%;
    --card-foreground: 0 0% 98%;
    
    --popover: 219 36% 20%;
    --popover-foreground: 0 0% 98%;
    
    --primary: 39 51% 48%;
    --primary-foreground: 219 36% 15%;
    
    --secondary: 219 36% 20%;
    --secondary-foreground: 39 51% 48%;
    
    --muted: 219 36% 20%;
    --muted-foreground: 215 16% 65%;
    
    --accent: 39 51% 48%;
    --accent-foreground: 219 36% 15%;
    
    --destructive: 0 63% 31%;
    --destructive-foreground: 0 0% 98%;
    
    --border: 219 36% 20%;
    --input: 219 36% 20%;
    --ring: 39 51% 48%;

    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
  
  /* Green color scheme for SEO Local Search page */
  .green-theme {
    --primary: 142 76% 12%; /* Green */
    --primary-foreground: 0 0% 100%;
    --primary-light: 142 76% 20%;
    
    --secondary: 45 93% 58%; /* Gold accent */
    --secondary-foreground: 142 76% 12%;
    
    --accent: 45 93% 58%;
    --accent-foreground: 142 76% 12%;
    
    /* Green gradients */
    --gradient-primary: linear-gradient(135deg, hsl(142 76% 8%), hsl(142 76% 12%), hsl(142 76% 16%));
    --gradient-gold: linear-gradient(135deg, hsl(45 93% 58%), hsl(38 90% 55%));
    
    /* Green shadows */
    --shadow-elegant: 0 10px 30px -10px hsl(142 76% 12% / 0.15);
    --shadow-luxury: 0 25px 50px -12px hsl(142 76% 12% / 0.25);
    --shadow-glow: 0 8px 32px hsl(45 93% 58% / 0.3);
  }
}

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

  body {
    @apply bg-background text-foreground;
  }
}

@keyframes gradient-flow {
  0% {
    background-position: 50% 0%;
  }
  12.5% {
    background-position: 50% 0%;
  }
  50% {
    background-position: 50% 100%;
  }
  62.5% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 50% 0%;
  }
}

.animate-gradient-flow {
  background: linear-gradient(180deg, 
    hsl(219 36% 15%), 
    hsl(219 36% 20%), 
    hsl(39 51% 48% / 0.6), 
    hsl(219 36% 18%), 
    hsl(219 36% 15%)
  );
  background-size: 100% 400%;
  animation: gradient-flow 12s ease-in-out infinite;
}

@keyframes gradient-flow-horizontal {
  0% {
    background-position: 100% 50%;
  }
  50% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

  .hover-gradient-flow:hover {
    background: linear-gradient(270deg, 
      hsl(39 51% 48%), 
      hsl(39 51% 55%), 
      hsl(39 51% 60%), 
      hsl(39 51% 52%), 
      hsl(39 51% 48%)
    ) !important;
    background-size: 400% 100% !important;
    animation: gradient-flow-horizontal 4s ease-in-out infinite;
    transition: all 0.3s ease;
  }

  /* Accessibility & 2025 SEO Enhancements */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .skip-link:focus {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    padding: 8px 16px;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    text-decoration: none;
    border-radius: 0 0 4px 0;
  }

  /* High contrast mode support */
  .high-contrast {
    filter: contrast(150%);
  }

  /* Reduced motion support */
  .reduce-motion * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Focus indicators */
  *:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
  }