@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 {
    --background: 0 0% 100%;
    --foreground: 222 32% 12%;

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

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

    --primary: 214 78% 49%;
    --primary-foreground: 0 0% 100%;

    --primary-dark: 214 72% 40%;
    --primary-glow: 214 78% 49%;

    --secondary: 210 40% 96%;
    --secondary-foreground: 222 32% 12%;

    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;

    --accent: 214 78% 49%;
    --accent-foreground: 0 0% 100%;

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

    --border: 214 28% 90%;
    --input: 214 28% 90%;
    --ring: 214 78% 49%;

    --trust: 142 60% 38%;
    --trust-foreground: 0 0% 100%;

    --radius: 0.625rem;

    --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: 214 78% 49%;
  }

  .dark {
    --background: 222 32% 8%;
    --foreground: 210 40% 98%;

    --card: 222 32% 11%;
    --card-foreground: 210 40% 98%;

    --popover: 222 32% 11%;
    --popover-foreground: 210 40% 98%;

    --primary: 214 78% 55%;
    --primary-foreground: 0 0% 100%;

    --secondary: 217 32% 17%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217 32% 17%;
    --muted-foreground: 215 20% 65%;

    --accent: 214 78% 55%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 63% 31%;
    --destructive-foreground: 0 0% 100%;

    --border: 217 32% 20%;
    --input: 217 32% 20%;
    --ring: 214 78% 55%;
  }
}

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

  html {
    -webkit-text-size-adjust: 100%;
    /* clip (not hidden) prevents horizontal scroll WITHOUT creating a scroll
       container — this keeps `position: sticky` (navbar, sticky call bar)
       anchored to the viewport instead of being broken by overflow. */
    overflow-x: clip;
  }

  body {
    @apply bg-background text-foreground;
    font-family: "Inter", sans-serif;
    overflow-x: clip;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Plus Jakarta Sans", sans-serif;
    letter-spacing: -0.02em;
  }

  /* Ensure tap targets are at least 44px on mobile */
  @media (max-width: 768px) {
    button,
    a {
      touch-action: manipulation;
    }
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  .bg-grid {
    background-image: radial-gradient(
      circle at 1px 1px,
      hsl(var(--primary) / 0.08) 1px,
      transparent 0
    );
    background-size: 28px 28px;
  }
  .gradient-primary {
    background: linear-gradient(135deg, hsl(214 78% 49%), hsl(214 72% 40%));
  }
  .gradient-hero {
    background:
      radial-gradient(
        900px 500px at 85% -10%,
        hsl(214 78% 49% / 0.18),
        transparent 60%
      ),
      radial-gradient(
        700px 400px at 10% 110%,
        hsl(214 72% 40% / 0.12),
        transparent 60%
      ),
      hsl(222 32% 12%);
  }
  .shadow-call {
    box-shadow: 0 10px 30px -8px hsl(214 78% 49% / 0.5);
  }
  .shadow-soft {
    box-shadow: 0 4px 24px -8px hsl(222 32% 12% / 0.12);
  }
  .shadow-card {
    box-shadow: 0 2px 12px -4px hsl(222 32% 12% / 0.08);
  }

  /* Performance: Mobile GPU acceleration & layout optimization */
  .will-change-transform {
    will-change: transform;
    transform: translateZ(0);
  }

  /* Content visibility for offscreen sections to minimize mobile main thread work.
     contain-intrinsic-size is a placeholder; sections that differ significantly
     should override it via inline style to avoid CLS. */
  .content-visibility-auto {
    content-visibility: auto;
    contain-intrinsic-size: 1px auto;
  }

  /* Smooth font rendering */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* Cookie banner entrance animation */
  @keyframes slide-in-from-bottom {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes slide-up {
    from {
      transform: translateY(80px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .animate-slide-up {
    animation: slide-up 0.4s ease-out 0.1s both;
  }
  .animate-fade-in {
    animation: fade-in 0.3s ease-out both;
  }
  .animate-in {
    animation-duration: 300ms;
    animation-fill-mode: both;
  }
  .slide-in-from-bottom {
    animation-name: slide-in-from-bottom;
  }
  .duration-300 {
    animation-duration: 300ms;
  }

  /* GPU-accelerated CSS Marquee for zero main-thread JS work */
  @keyframes marquee {
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(-50%, 0, 0);
    }
  }
  .animate-marquee {
    animation: marquee 35s linear infinite;
    will-change: transform;
  }
  .animate-marquee:hover {
    animation-play-state: paused;
  }

  /* GPU-composited waveform — uses transform: scaleY() instead of height
     so the animation runs on the compositor thread (no main-thread reflow). */
  @keyframes waveform {
    0%,
    100% {
      transform: scaleY(0.25);
    }
    25% {
      transform: scaleY(0.88);
    }
    50% {
      transform: scaleY(0.44);
    }
    75% {
      transform: scaleY(1);
    }
  }
}