/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
Note: Using Tailwind CDN, so @tailwind directives are not needed.
*/

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 100%;

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

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

    --primary: 199 68% 40%;
    --primary-foreground: 0 0% 100%;

    --secondary: 220 15% 30%;
    --secondary-foreground: 0 0% 100%;

    --muted: 220 10% 40%;
    --muted-foreground: 220 10% 70%;

    --accent: 199 68% 40%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;

    --border: 220 10% 40%;
    --input: 0 0% 100%;
    --ring: 199 68% 40%;

    --radius: 0.5rem;

    --success: 142 76% 36%;
    --success-foreground: 0 0% 100%;

    --hero-overlay: 220 20% 10%;

    --sidebar-background: 220 15% 15%;
    --sidebar-foreground: 0 0% 100%;
    --sidebar-primary: 199 68% 40%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 220 15% 25%;
    --sidebar-accent-foreground: 0 0% 100%;
    --sidebar-border: 220 10% 30%;
    --sidebar-ring: 199 68% 40%;
  }

  .dark {
    --background: 220 20% 10%;
    --foreground: 0 0% 100%;

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

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

    --primary: 199 68% 40%;
    --primary-foreground: 0 0% 100%;

    --secondary: 220 15% 30%;
    --secondary-foreground: 0 0% 100%;

    --muted: 220 10% 40%;
    --muted-foreground: 220 10% 70%;

    --accent: 199 68% 40%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 100%;

    --border: 220 10% 30%;
    --input: 0 0% 100%;
    --ring: 199 68% 40%;

    --success: 142 76% 36%;
    --success-foreground: 0 0% 100%;

    --hero-overlay: 220 20% 10%;

    --sidebar-background: 220 15% 15%;
    --sidebar-foreground: 0 0% 100%;
    --sidebar-primary: 199 68% 40%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 220 15% 25%;
    --sidebar-accent-foreground: 0 0% 100%;
    --sidebar-border: 220 10% 30%;
    --sidebar-ring: 199 68% 40%;
  }
}

/* Base styles */
* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* Custom animations */
@keyframes fade-in {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-right {
  0% { opacity: 0; transform: translateX(30px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px hsl(var(--primary) / 0.4); }
  50% { box-shadow: 0 0 40px hsl(var(--primary) / 0.6); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

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

.animate-fade-in-right {
  animation: fade-in-right 0.6s ease-out forwards;
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* Custom slide animations for enquiry modal - Desktop (from top) */
@keyframes slide-in-from-top-modal {
  from {
    transform: translate(-50%, -100%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

@keyframes slide-out-to-top-modal {
  from {
    transform: translate(-50%, 0);
    opacity: 1;
  }
  to {
    transform: translate(-50%, -100%);
    opacity: 0;
  }
}

.animate-slide-in-from-top-modal {
  animation: slide-in-from-top-modal 0.3s ease-out forwards;
}

.animate-slide-out-to-top-modal {
  animation: slide-out-to-top-modal 0.3s ease-out forwards;
}

/* Custom slide animations for enquiry modal - Mobile (from bottom) */
@keyframes slide-in-from-bottom-modal {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-out-to-bottom-modal {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

.animate-slide-in-from-bottom-modal {
  animation: slide-in-from-bottom-modal 0.3s ease-out forwards;
}

.animate-slide-out-to-bottom-modal {
  animation: slide-out-to-bottom-modal 0.3s ease-out forwards;
}

/* Modal content optimization */
.modal-content {
  will-change: transform, opacity;
}