/* Font import moved to HTML head for LCP optimization */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* AI SmartTrip Planner Design System - Travel-themed with vibrant colors
All colors MUST be HSL.
*/

@layer base {
  :root {
    /* Travel-themed color palette */
    --background: 240 50% 98%;
    --foreground: 220 25% 15%;

    --card: 0 0% 100%;
    --card-foreground: 220 25% 15%;

    --popover: 0 0% 100%;
    --popover-foreground: 220 25% 15%;

    /* Primary: Ocean Blue */
    --primary: 205 85% 55%;
    --primary-foreground: 0 0% 100%;
    --primary-glow: 205 85% 65%;

    /* Secondary: Sky Blue */
    --secondary: 200 25% 96%;
    --secondary-foreground: 205 85% 45%;

    --muted: 220 20% 95%;
    --muted-foreground: 220 15% 55%;

    /* Accent: Coral/Orange for CTAs */
    --accent: 15 85% 60%;
    --accent-foreground: 0 0% 100%;
    --accent-glow: 15 85% 70%;

    --destructive: 0 75% 55%;
    --destructive-foreground: 0 0% 100%;

    --border: 220 20% 90%;
    --input: 220 20% 95%;
    --ring: 205 85% 55%;

    /* Travel-specific tokens */
    --travel-blue: 205 85% 55%;
    --travel-teal: 180 75% 45%;
    --travel-coral: 15 85% 60%;
    --travel-gold: 45 90% 55%;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-glow)));
    --gradient-sunset: linear-gradient(135deg, hsl(var(--travel-coral)), hsl(var(--travel-gold)));
    --gradient-ocean: linear-gradient(135deg, hsl(var(--travel-blue)), hsl(var(--travel-teal)));

    /* Shadows */
    --shadow-elegant: 0 10px 30px -10px hsl(var(--primary) / 0.3);
    --shadow-glow: 0 0 40px hsl(var(--primary-glow) / 0.4);
    --shadow-card: 0 8px 25px -8px hsl(var(--primary) / 0.1);

    /* Animations */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    --radius: 0.5rem;
  }

  .dark {
    --background: 220 25% 8%;
    --foreground: 220 10% 90%;

    --card: 220 25% 10%;
    --card-foreground: 220 10% 90%;

    --popover: 220 25% 10%;
    --popover-foreground: 220 10% 90%;

    --primary: 205 85% 60%;
    --primary-foreground: 220 25% 8%;

    --secondary: 220 25% 15%;
    --secondary-foreground: 205 85% 60%;

    --muted: 220 25% 15%;
    --muted-foreground: 220 15% 60%;

    --accent: 15 85% 65%;
    --accent-foreground: 220 25% 8%;

    --destructive: 0 75% 60%;
    --destructive-foreground: 220 10% 90%;

    --border: 220 25% 20%;
    --input: 220 25% 15%;
    --ring: 205 85% 60%;

    /* Dark mode gradients */
    --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(205 85% 70%));
    --gradient-sunset: linear-gradient(135deg, hsl(15 85% 65%), hsl(45 90% 60%));
    --gradient-ocean: linear-gradient(135deg, hsl(205 85% 60%), hsl(180 75% 50%));

    /* Dark mode shadows */
    --shadow-elegant: 0 10px 30px -10px hsl(0 0% 0% / 0.5);
    --shadow-glow: 0 0 40px hsl(var(--primary) / 0.3);
    --shadow-card: 0 8px 25px -8px hsl(0 0% 0% / 0.3);
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@layer utilities {
  /* Travel-themed utility classes */
  .bg-gradient-primary {
    background: var(--gradient-primary);
  }

  .bg-gradient-sunset {
    background: var(--gradient-sunset);
  }

  .bg-gradient-ocean {
    background: var(--gradient-ocean);
  }

  .shadow-elegant {
    box-shadow: var(--shadow-elegant);
  }

  .shadow-glow {
    box-shadow: var(--shadow-glow);
  }

  .shadow-card {
    box-shadow: var(--shadow-card);
  }

  .animate-smooth {
    transition: var(--transition-smooth);
  }

  .animate-bounce-in {
    transition: var(--transition-bounce);
  }

  /* Travel card styles */
  .travel-card {
    @apply bg-card border border-border rounded-lg p-6 shadow-card animate-smooth;
  }

  .travel-card:hover {
    @apply shadow-elegant transform -translate-y-1;
  }

  .travel-button-primary {
    @apply bg-gradient-primary text-primary-foreground px-6 py-3 rounded-lg font-semibold shadow-card animate-smooth;
  }

  .travel-button-primary:hover {
    @apply shadow-glow transform -translate-y-0.5;
  }

  .travel-button-secondary {
    @apply bg-secondary text-secondary-foreground border border-border px-6 py-3 rounded-lg font-semibold animate-smooth;
  }

  .travel-button-accent {
    @apply bg-gradient-sunset text-accent-foreground px-6 py-3 rounded-lg font-semibold shadow-card animate-smooth;
  }

  .travel-button-accent:hover {
    @apply shadow-glow transform -translate-y-0.5;
  }

  /* Status indicators */
  .status-success {
    @apply bg-green-100 text-green-800 border border-green-200;
  }

  .status-warning {
    @apply bg-yellow-100 text-yellow-800 border border-yellow-200;
  }

  .status-error {
    @apply bg-red-100 text-red-800 border border-red-200;
  }

  .status-info {
    @apply bg-blue-100 text-blue-800 border border-blue-200;
  }

  .dark .status-success {
    @apply bg-green-900/20 text-green-400 border-green-800;
  }

  .dark .status-warning {
    @apply bg-yellow-900/20 text-yellow-400 border-yellow-800;
  }

  .dark .status-error {
    @apply bg-red-900/20 text-red-400 border-red-800;
  }

  .dark .status-info {
    @apply bg-blue-900/20 text-blue-400 border-blue-800;
  }

  /* Animation keyframes */
  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slide-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in {
    animation: fade-in 0.5s ease-out;
  }

  .animate-slide-up {
    animation: slide-up 0.6s ease-out;
  }

  /* Animation delay utilities */
  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }

  /* Loading skeleton */
  .skeleton {
    @apply bg-muted animate-pulse rounded;
  }

  /* Input focus styles */
  .input-focus {
    @apply focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:border-transparent;
  }

  /* Typography enhancements */
  .text-gradient-primary {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .text-gradient-sunset {
    background: var(--gradient-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Enhanced gradient classes */
  .gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .gradient-primary {
    background: var(--gradient-primary);
  }

  .gradient-hero {
    background: var(--gradient-sunset);
  }

  .hover-scale {
    transition: var(--transition-smooth);
  }

  .hover-scale:hover {
    transform: scale(1.05);
  }

  .transition-travel {
    transition: var(--transition-smooth);
  }

  .shadow-travel {
    box-shadow: var(--shadow-card);
  }

  .gradient-card {
    background: linear-gradient(135deg, hsl(var(--card)) 0%, hsl(var(--muted)) 100%);
  }

  /* Card enhancements */
  .glass-card {
    @apply bg-card/80 backdrop-blur-sm border border-border/50;
  }

  .elevated-card {
    @apply shadow-elegant hover:shadow-glow transform hover:-translate-y-1 transition-all duration-300;
  }

  /* Spacing utilities for consistent layout */
  .section-padding {
    @apply py-16 px-4 sm:px-6 lg:px-8;
  }

  .container-responsive {
    @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
  }

  .content-width {
    @apply max-w-4xl mx-auto;
  }

  /* Grid utilities for responsive layouts */
  .grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
  }

  .grid-auto-fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
  }

  /* Form styling */
  .form-group {
    @apply space-y-2;
  }

  .form-label {
    @apply text-sm font-medium text-foreground;
  }

  .form-input {
    @apply w-full px-3 py-2 bg-input border border-border rounded-md focus:ring-2 focus:ring-ring focus:border-transparent;
  }

  .form-error {
    @apply text-sm text-destructive;
  }

  /* Enhanced button styles with modern gradients */
  .btn-gaming {
    @apply bg-gradient-to-r from-pink-500 to-purple-500 text-white px-6 py-3 rounded-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-300;
  }
  
  .btn-primary-modern {
    @apply bg-gradient-to-r from-blue-500 to-teal-500 text-white px-6 py-3 rounded-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-300;
  }
  
  .btn-success-modern {
    @apply bg-gradient-to-r from-green-500 to-emerald-500 text-white px-6 py-3 rounded-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-300;
  }

  /* Enhanced itinerary and journey planner styles */
  .enhanced-journey-planner {
    overflow: hidden;
    height: auto;
  }

  .enhanced-journey-planner .filters-panel {
    height: fit-content;
    max-height: none;
    overflow: visible;
  }

  .enhanced-journey-planner .main-content {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .trip-optimizer-card {
    transition: var(--transition-smooth);
  }

  .trip-optimizer-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
  }

  /* Remove all scrollbars globally */
  * {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  *::-webkit-scrollbar {
    display: none;
  }

  /* Responsive grid utilities */
  .grid-responsive {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
  }
  
  @media (min-width: 768px) {
    .grid-responsive {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (min-width: 1024px) {
    .grid-responsive {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  /* Card hover effects */
  .card-hover {
    transition: var(--transition-smooth);
  }
  
  .card-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
  }

  /* Responsive canvas for games */
  .game-canvas { max-width: 100%; height: auto; touch-action: none; }
}