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

@layer utilities {
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--primary) / 0.3) transparent;
  }
  .scrollbar-thin::-webkit-scrollbar {
    height: 6px;
  }
  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: hsl(var(--primary) / 0.3);
    border-radius: 3px;
  }
  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--primary) / 0.5);
  }
  
  .scroll-snap-center {
    scroll-snap-align: center;
  }
}

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

@layer base {
  :root {
    /* Soft dark theme for harmony and peace */
    --background: 222 20% 15%;
    --foreground: 210 25% 92%;

    --card: 222 18% 18%;
    --card-foreground: 210 25% 92%;

    --popover: 222 18% 18%;
    --popover-foreground: 210 25% 92%;

    --primary: 145 65% 45%;
    --primary-foreground: 0 0% 100%;

    --secondary: 217 15% 22%;
    --secondary-foreground: 210 25% 88%;

    --muted: 217 12% 25%;
    --muted-foreground: 215 15% 70%;

    --accent: 145 60% 50%;
    --accent-foreground: 0 0% 100%;

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

    --border: 217 10% 28%;
    --input: 217 12% 25%;
    --ring: 145 60% 50%;
    
    /* Soft brand colors for harmony */
    --botplugin-green: 145 65% 45%;
    --botplugin-green-light: 145 60% 55%;
    --botplugin-green-dark: 145 70% 35%;
    --botplugin-dark: 222 20% 15%;
    --botplugin-darker: 220 25% 12%;
    --botplugin-accent: 145 60% 50%;
    --roote-black: 0 0% 12%;
    --roote-white: 0 0% 96%;
    --roote-green: 145 65% 45%;
    
    /* Additional product colors */
    --sendflux-blue: 212 95% 55%;
    --sendflux-dark: 212 95% 25%;
    --catalognet-purple: 260 75% 60%;
    --catalognet-dark: 260 75% 30%;
    --chatcenter-orange: 145 85% 45%;
    --chatcenter-dark: 145 85% 35%;
    --chatcenter-darker: 145 85% 25%;
    
    /* API WhatsApp colors */
    --api-blue: 214 100% 60%;
    --api-blue-light: 214 100% 70%;
    --api-blue-dark: 214 100% 50%;
    
    /* Soft harmonious gradients */
    --gradient-primary: linear-gradient(135deg, hsl(var(--botplugin-dark)) 0%, hsl(var(--botplugin-darker)) 100%);
    --gradient-hero: linear-gradient(135deg, hsl(var(--background)) 0%, hsl(var(--muted)) 100%);
    --gradient-modern: linear-gradient(135deg, hsl(var(--background)) 0%, hsl(var(--botplugin-green) / 0.05) 50%, hsl(var(--muted)) 100%);
    --gradient-card: linear-gradient(145deg, hsl(var(--card) / 0.8) 0%, hsl(var(--muted) / 0.6) 100%);
    --gradient-cta: linear-gradient(135deg, hsl(var(--botplugin-green)) 0%, hsl(var(--botplugin-green-light)) 100%);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 hsl(var(--roote-black) / 0.05);
    --shadow-md: 0 4px 6px -1px hsl(var(--roote-black) / 0.1);
    --shadow-lg: 0 10px 15px -3px hsl(var(--roote-black) / 0.1);
    --shadow-xl: 0 20px 25px -5px hsl(var(--roote-black) / 0.1);
    --shadow-green: 0 10px 25px -5px hsl(var(--roote-green) / 0.2);
    --shadow-card: 0 4px 6px -1px hsl(var(--roote-green) / 0.05);
    
    /* Spacing */
    --section-padding: 5rem 0;
    --container-max-width: 1200px;

    --radius: 0.5rem;

    --sidebar-background: 222 18% 18%;
    --sidebar-foreground: 210 25% 92%;
    --sidebar-primary: 145 65% 45%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 217 12% 25%;
    --sidebar-accent-foreground: 210 25% 88%;
    --sidebar-border: 217 10% 28%;
    --sidebar-ring: 145 60% 50%;
  }

  .light {
    /* Light theme - bright and luminous */
    --background: 0 0% 94%;
    --foreground: 222 20% 12%;

    --card: 0 0% 100%;
    --card-foreground: 222 20% 12%;

    --popover: 0 0% 100%;
    --popover-foreground: 222 20% 12%;

    --primary: 145 65% 45%;
    --primary-foreground: 0 0% 100%;

    --secondary: 145 20% 98%;
    --secondary-foreground: 222 20% 12%;

    --muted: 145 15% 92%;
    --muted-foreground: 222 25% 45%;

    --accent: 145 60% 50%;
    --accent-foreground: 0 0% 100%;

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

    --border: 145 15% 85%;
    --input: 145 10% 94%;
    --ring: 145 60% 50%;
    
    /* Light theme brand colors - vibrant but balanced */
    --botplugin-green: 145 65% 45%;
    --botplugin-green-light: 145 60% 55%;
    --botplugin-green-dark: 145 70% 35%;
    --botplugin-dark: 222 20% 12%;
    --botplugin-darker: 220 25% 8%;
    --botplugin-accent: 145 60% 50%;
    --roote-black: 222 20% 12%;
    --roote-white: 0 0% 100%;
    --roote-green: 145 65% 45%;
    
    /* Product colors for light theme - vibrant */
    --sendflux-blue: 212 90% 50%;
    --sendflux-dark: 212 90% 40%;
    --catalognet-purple: 260 70% 55%;
    --catalognet-dark: 260 70% 45%;
    --chatcenter-orange: 145 85% 45%;
    --chatcenter-dark: 145 85% 35%;
    --chatcenter-darker: 145 85% 25%;
    
    --api-blue: 214 95% 55%;
    --api-blue-light: 214 95% 65%;
    --api-blue-dark: 214 95% 45%;
    
    /* Light theme gradients - pastel and luminous */
    --gradient-primary: linear-gradient(135deg, hsl(0 0% 99%) 0%, hsl(145 30% 97%) 100%);
    --gradient-hero: linear-gradient(135deg, hsl(145 15% 96%) 0%, hsl(145 20% 94%) 100%);
    --gradient-modern: linear-gradient(135deg, hsl(0 0% 99%) 0%, hsl(145 20% 97%) 50%, hsl(145 15% 96%) 100%);
    --gradient-card: linear-gradient(145deg, hsl(0 0% 100%) 0%, hsl(145 20% 98%) 100%);
    --gradient-cta: linear-gradient(135deg, hsl(145 65% 45%) 0%, hsl(145 60% 55%) 100%);
    
    /* Light theme shadows - very soft */
    --shadow-sm: 0 1px 2px 0 hsl(145 20% 60% / 0.08);
    --shadow-md: 0 4px 8px -2px hsl(145 20% 60% / 0.12);
    --shadow-lg: 0 10px 20px -4px hsl(145 20% 60% / 0.15);
    --shadow-xl: 0 20px 30px -8px hsl(145 20% 60% / 0.18);
    --shadow-green: 0 8px 20px -4px hsl(145 65% 45% / 0.12);
    --shadow-card: 0 2px 8px -2px hsl(145 30% 70% / 0.08);

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5% 26%;
    --sidebar-primary: 240 6% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 5% 96%;
    --sidebar-accent-foreground: 240 6% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 145 85% 45%;
  }
}

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

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

  .container {
    @apply w-full;
  }

  html {
    scroll-behavior: smooth;
  }

  /* Respect user preferences for reduced motion */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

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