@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 {
    /* Modern B2B SaaS color scheme with dark theme */
    --background: 215 28% 7%;
    --foreground: 0 0% 98%;

    --card: 215 25% 9%;
    --card-foreground: 0 0% 98%;

    --popover: 215 25% 9%;
    --popover-foreground: 0 0% 98%;

    --primary: 355 100% 75%;
    --primary-foreground: 0 0% 98%;
    --primary-glow: 355 100% 80%;

    --secondary: 215 20% 15%;
    --secondary-foreground: 0 0% 98%;

    --muted: 215 20% 12%;
    --muted-foreground: 215 15% 65%;

    --accent: 355 100% 75%;
    --accent-foreground: 0 0% 98%;

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

    --border: 215 20% 18%;
    --input: 215 20% 15%;
    --ring: 355 100% 75%;

    --radius: 0.75rem;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(355, 100%, 75%), hsl(350, 95%, 70%));
    --gradient-hero: linear-gradient(135deg, hsl(215, 28%, 7%), hsl(215, 25%, 12%));
    --gradient-card: linear-gradient(135deg, hsl(215, 25%, 9%), hsl(215, 20%, 12%));
    --gradient-subtle: linear-gradient(180deg, hsl(215, 25%, 9%), hsl(215, 20%, 8%));

    /* Shadows */
    --shadow-elegant: 0 20px 50px -10px hsl(355, 100%, 75%, 0.2);
    --shadow-glow: 0 0 40px hsl(355, 100%, 80%, 0.15);
    --shadow-card: 0 8px 32px hsl(0, 0%, 0%, 0.3);

    /* Glass effect */
    --glass-bg: hsla(215, 25%, 12%, 0.8);
    --glass-border: hsla(215, 20%, 18%, 0.6);

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

  .light {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 355 100% 65%;
    --primary-foreground: 0 0% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 43.5%;
    --accent: 355 100% 65%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 355 100% 65%;
  }
}

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

  html {
    scroll-behavior: smooth;
    overscroll-behavior: none;
  }

  body {
    @apply bg-background text-foreground;
    background: var(--gradient-hero);
    min-height: 100vh;
  }

  .glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

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

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

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

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

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

  @keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px hsl(355, 100%, 75%, 0.3); }
    50% { box-shadow: 0 0 40px hsl(355, 100%, 75%, 0.6); }
  }

  @keyframes scroll-left {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .animate-scroll-left {
    animation: scroll-left 25s linear infinite;
  }

  /* Light section backgrounds for contrast */
  .section-light {
    background: hsl(0, 0%, 98%);
    color: hsl(222.2, 84%, 4.9%);
  }

  .section-light h1, .section-light h2, .section-light h3, .section-light h4, .section-light h5, .section-light h6 {
    color: hsl(222.2, 84%, 4.9%) !important;
  }

  .section-light p {
    color: hsl(222.2, 84%, 4.9%) !important;
  }

  .section-light span {
    color: hsl(222.2, 84%, 4.9%) !important;
  }

  .section-light .text-muted-foreground {
    color: hsl(215.4, 16.3%, 40%) !important;
  }

  .section-light .gradient-text {
    background: linear-gradient(135deg, hsl(355, 100%, 65%), hsl(350, 95%, 60%)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }

  .section-light .glass-card {
    background: hsl(0, 0%, 100%);
    border: 1px solid hsl(214.3, 31.8%, 91.4%);
    box-shadow: 0 4px 20px hsla(0, 0%, 0%, 0.08);
  }

  .section-light .glass-card:hover {
    border-color: hsl(355, 100%, 65%);
    box-shadow: 0 8px 32px hsla(0, 0%, 0%, 0.12);
  }

  .section-subtle {
    background: hsl(0, 0%, 96%);
    color: hsl(222.2, 84%, 4.9%);
  }

  .section-subtle h1, .section-subtle h2, .section-subtle h3, .section-subtle h4, .section-subtle h5, .section-subtle h6 {
    color: hsl(222.2, 84%, 4.9%) !important;
  }

  .section-subtle p {
    color: hsl(222.2, 84%, 4.9%) !important;
  }

  .section-subtle span {
    color: hsl(222.2, 84%, 4.9%) !important;
  }

  .section-subtle .text-muted-foreground {
    color: hsl(215.4, 16.3%, 40%) !important;
  }

  .section-subtle .gradient-text {
    background: linear-gradient(135deg, hsl(355, 100%, 65%), hsl(350, 95%, 60%)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }

  .section-subtle .glass-card {
    background: hsl(0, 0%, 100%);
    border: 1px solid hsl(214.3, 31.8%, 91.4%);
    box-shadow: 0 4px 20px hsla(0, 0%, 0%, 0.08);
  }

  .section-subtle .glass-card:hover {
    border-color: hsl(355, 100%, 65%);
    box-shadow: 0 8px 32px hsla(0, 0%, 0%, 0.12);
  }

  /* Button styles for light sections - only for outline and ghost variants (using data-variant) */
  .section-light button[data-variant="outline"],
  .section-light button[data-variant="ghost"],
  .section-subtle button[data-variant="outline"],
  .section-subtle button[data-variant="ghost"] {
    color: hsl(222.2, 84%, 4.9%) !important;
  }

  .section-light button[data-variant="outline"]:hover,
  .section-light button[data-variant="ghost"]:hover,
  .section-subtle button[data-variant="outline"]:hover,
  .section-subtle button[data-variant="ghost"]:hover {
    color: hsl(0, 0%, 98%) !important;
    background-color: hsl(355, 100%, 65%) !important;
  }


  /* Performance optimizations - prevent forced reflows */
  header {
    will-change: transform;
    contain: layout;
  }

  section {
    contain: layout style;
  }

  /* Optimize carousel and animated elements */
  [class*="carousel"],
  [class*="embla"],
  .animate-scroll-left {
    will-change: transform;
    transform: translateZ(0);
    contain: layout;
  }

  /* Optimize scroll containers */
  [class*="scroll"] {
    will-change: scroll-position;
  }

  /* Optimize animated elements */
  .animate-float,
  .animate-pulse-glow,
  .animate-pulse-neon-pink,
  .animate-pulse-neon-cyan {
    will-change: transform, box-shadow;
    transform: translateZ(0);
  }

  /* Optimize hover effects */
  .hover-glow {
    contain: layout;
  }

}