/* Import styles for the range slider */
@import 'rc-slider/assets/index.css';
@import "yet-another-react-lightbox/styles.css";

@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 {
    /* G Auto Brand Colors */
    --g-auto-primary: 187 66% 26%;        /* Dark Teal #1a6b6f */
    --g-auto-accent: 178 59% 49%;         /* Light Teal #33c6c1 */
    --g-auto-accent-light: 178 59% 90%;   /* Very Light Teal */
    --g-auto-text: 210 11% 15%;           /* Dark Grey #1F2937 */
    --g-auto-border: 220 13% 91%;         /* Light Grey #E5E7EB */
    
    /* Design System Colors */
    --background: 0 0% 100%;
    --foreground: 210 11% 15%;            /* G Auto text color */

    --card: 0 0% 100%;
    --card-foreground: 210 11% 15%;

    --popover: 0 0% 100%;
    --popover-foreground: 210 11% 15%;

    --primary: 187 66% 26%;               /* G Auto Primary */
    --primary-foreground: 0 0% 100%;

    --secondary: 220 13% 96%;
    --secondary-foreground: 187 66% 26%;

    --muted: 220 13% 96%;
    --muted-foreground: 215 20% 65%;

    --accent: 178 59% 49%;                /* G Auto Accent */
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 220 13% 91%;                /* G Auto border */
    --input: 220 13% 91%;
    --ring: 178 59% 49%;                  /* G Auto accent for focus */

    --radius: 0.5rem;
    
    /* Custom Design Tokens */
    --hero-gradient: linear-gradient(135deg, hsl(var(--primary) / 0.95), hsl(var(--accent) / 0.85));
    --card-shadow: 0 4px 6px -1px hsl(var(--primary) / 0.1);
    --card-shadow-hover: 0 10px 25px -3px hsl(var(--primary) / 0.15);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --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: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --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%;
  }
}

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

  body {
    @apply bg-background text-foreground font-poppins;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-poppins font-semibold text-primary;
  }
}

/* Animation keyframes */
@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

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

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes hero-zoom {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Animation utilities */
@layer utilities {
  .animate-fade-in {
    animation: fade-in 0.6s ease-out;
  }

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

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

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

  .animate-hero-zoom {
    animation: hero-zoom 2s ease-out;
  }

  .animate-stagger-1 {
    animation: slide-up 0.6s ease-out 0.1s both;
  }

  .animate-stagger-2 {
    animation: slide-up 0.6s ease-out 0.2s both;
  }

  .animate-stagger-3 {
    animation: slide-up 0.6s ease-out 0.3s both;
  }

  .animate-stagger-4 {
    animation: slide-up 0.6s ease-out 0.4s both;
  }

  .shimmer {
    background: linear-gradient(
      90deg,
      hsl(var(--muted)) 0%,
      hsl(var(--muted-foreground) / 0.1) 50%,
      hsl(var(--muted)) 100%
    );
    background-size: 200px 100%;
    animation: shimmer 1.5s infinite;
  }

  .story-link {
    @apply relative inline-block after:content-[''] after:absolute after:w-full after:scale-x-0 after:h-0.5 after:bottom-0 after:left-0 after:bg-accent after:origin-bottom-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-bottom-left;
  }

  .hover-scale {
    @apply transition-transform duration-200 hover:scale-105;
  }
}