@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&family=Noto+Sans+Devanagari:wght@400;500;600;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Prevent horizontal scrolling on mobile */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

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

/* Performance: Reduce paint complexity */
* {
  box-sizing: border-box;
}

/* Accessibility & Performance: Screen reader only content and optimizations */

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

    --card: 0 0% 100%;
    --card-foreground: 215 27% 17%;

    --popover: 0 0% 100%;
    --popover-foreground: 215 27% 17%;

    --primary: 215 89% 45%;
    --primary-foreground: 0 0% 98%;
    --primary-glow: 215 100% 60%;

    --secondary: 210 40% 94%;
    --secondary-foreground: 215 27% 15%;

    --muted: 210 40% 94%;
    --muted-foreground: 215.4 16.3% 40%;

    --accent: 158 64% 45%;
    --accent-foreground: 0 0% 98%;
    --accent-glow: 158 73% 60%;

    --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: 215 89% 52%;

    /* Gradient variables removed - using solid colors instead */
    --text-gradient: linear-gradient(135deg, hsl(215 89% 52%), hsl(158 64% 52%));
    
    --shadow-primary: 0 10px 30px -10px hsl(215 89% 52% / 0.3);
    --shadow-glow: 0 0 40px hsl(215 100% 65% / 0.2);
    
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --radius: 0.5rem;
  }

  .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: 215 89% 45%;
    --primary-foreground: 210 40% 98%;
    --primary-glow: 215 100% 60%;

    --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: 158 64% 45%;
    --accent-foreground: 210 40% 98%;
    --accent-glow: 158 73% 60%;

    --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: 215 89% 52%;
  }
}

/* Force white background globally to prevent gradient flash */
html, body {
  background: hsl(var(--background)) !important;
  min-height: 100%;
}

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

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

/* Custom scrollbar utilities */
@layer utilities {
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  
  .scrollbar-default {
    -ms-overflow-style: auto;
    scrollbar-width: auto;
  }
  
  .scrollbar-default::-webkit-scrollbar {
    display: block;
  }
  
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* Performance optimizations */
  img {
    content-visibility: auto;
  }
  
  /* Content visibility optimizations for below-the-fold sections */
  .section-below-fold {
    content-visibility: auto;
    contain-intrinsic-size: 800px;
  }

  /* Optimize commonly used below-the-fold sections */
  .features-section,
  .testimonials-section,
  .faq-section,
  .comparison-section,
  .cta-section,
  .how-it-works-section,
  .price-simulator-section {
    content-visibility: auto;
    contain-intrinsic-size: 600px;
  }

  /* Lazy image optimizations - ensure no CLS */
  img[loading="lazy"] {
    min-height: 200px; /* Prevent layout shift */
  }

  /* Blog images with proper aspect ratio */
  .blog-featured-image {
    aspect-ratio: 16/9;
    object-fit: cover;
  }
  
  /* Better focus indicators for accessibility */
  .focus-visible {
    @apply ring-2 ring-primary ring-offset-2 ring-offset-background;
  }
  
  /* Reduced motion for users who prefer it */
  @media (prefers-reduced-motion: reduce) {
    .animate-spin,
    .animate-pulse,
    .animate-bounce {
      animation: none;
    }
  }
}

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Account for fixed header so anchors don't hide beneath it */
[id] {
  scroll-margin-top: 80px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}