@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 {
    /* ------------------------------------------------------------------
       Brand: "your browser is already a phone".  Palette: OCEAN.

       Chosen by Pascal 2026-10-20 from three options rendered on the live
       homepage, after coral (cf99f69) and violet (9cacfbd) were rejected.

       Rule that came out of those rejections: PRIMARY is used ~240 times
       (links, icons, borders, tinted backgrounds), so it becomes the colour of
       the whole site and must be calm. Personality lives in the headline
       gradient and in motion, not in saturating every link.

       ACCENT is the CALL colour: green, because in every phone UI green means
       call and red means hang up. Hang-up stays on --destructive.
       ------------------------------------------------------------------ */
    --background: 0 0% 100%;
    --foreground: 210 40% 12%;

    --card: 0 0% 100%;
    --card-foreground: 210 40% 12%;

    --popover: 0 0% 100%;
    --popover-foreground: 210 40% 12%;

    /* Ocean blue. White text on it measures 5.3:1 (WCAG AA). */
    --primary: 205 85% 38%;
    --primary-foreground: 0 0% 100%;
    --primary-glow: 205 85% 52%;

    --secondary: 205 30% 96%;
    --secondary-foreground: 210 40% 14%;

    --muted: 205 25% 96%;
    --muted-foreground: 210 12% 40%;

    /* Call / connected / success. Darkened until white text passes AA. */
    --accent: 152 66% 31%;
    --accent-foreground: 0 0% 100%;
    --accent-glow: 152 65% 45%;

    --destructive: 0 74% 50%;
    --destructive-foreground: 0 0% 100%;

    --border: 205 20% 90%;
    --input: 205 20% 90%;
    --ring: 205 85% 38%;

    /* Headline only: ocean into aqua. The one loud thing on the page. */
    --text-gradient: linear-gradient(120deg, hsl(208 88% 44%), hsl(176 78% 38%), hsl(208 88% 44%));
    /* Banners and illustrations reference this instead of hardcoding hues. */
    --brand-gradient: linear-gradient(135deg, hsl(205 85% 38%), hsl(176 72% 36%));

    --shadow-primary: 0 12px 32px -12px hsl(205 85% 38% / 0.35);
    --shadow-glow: 0 0 44px hsl(205 85% 52% / 0.22);

    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --radius: 0.875rem;
  }
}


/* 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 {
  /* --text-gradient is blue -> aqua -> blue so the shimmer loops without a
     seam. Showing it at 200% width means every static use renders just the
     clean blue -> aqua half, and animate-gradient-shift slides through it. */
  .bg-text-gradient {
    background-size: 200% auto;
  }
  /* Chips and cards lift a touch on hover. */
  .motion-lift {
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;
  }
  .motion-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -12px hsl(var(--foreground) / 0.25);
  }
  /* Keypad keys give a physical "pop" when pressed. */
  .motion-pop {
    transition: transform 0.12s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .motion-pop:active {
    transform: scale(0.9);
  }

  .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,
    /* Brand motion. animation:none leaves fade-up content at its natural,
       fully visible state, so nothing is ever stranded at opacity 0. */
    .animate-fade-up,
    .animate-gradient-shift,
    .animate-live-ping,
    .animate-breathe,
    .group:hover .group-hover\:animate-ring-wiggle {
      animation: none !important;
    }
    .motion-lift:hover,
    .motion-pop:active {
      transform: none !important;
    }
  }
}

/* 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;
  }
}