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

@layer base {
  :root {
    --header-height: 85px;
    --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: 24.6 95% 53.1%; /* Orange #F97316 */
    --primary-foreground: 210 40% 98%;
    --secondary: 221.2 83.2% 53.3%; /* Blue */
    --secondary-foreground: 210 40% 98%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --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: 24.6 95% 53.1%;
    --radius: 0.75rem;
  }

  .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: 24.6 95% 53.1%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --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: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --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: 24.6 95% 53.1%;
  }

  html {
    @apply overflow-x-hidden;
    width: 100%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
  }
  
  body {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    @apply bg-background text-foreground overflow-x-hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility; 
  }
}

@layer components {
  /* HERO OPTIMIZATION CLASSES */
  .hero-optimized {
    @apply pt-2 pb-8 md:pt-4 md:pb-12 !mt-0 flex flex-col justify-center overflow-hidden min-h-0 md:min-h-[480px];
    background-color: #1e3a8a;
    background-image: linear-gradient(to bottom right, #1e3a8a, #1e40af, #1e3a8a);
  }

  .hero-container {
    @apply w-full max-w-[1200px] mx-auto px-4 sm:px-6 md:px-8 lg:px-12 relative z-10 !pt-0;
  }

  .hero-content-stack {
    @apply space-y-2 md:space-y-4;
  }

  .hero-title {
    @apply !mt-0 !mb-1 leading-tight;
  }

  .hero-subtitle {
    @apply !mt-0 !mb-2 leading-snug opacity-95;
  }

  .hero-description {
    @apply !mt-0 !mb-4 leading-relaxed font-light;
  }

  .hero-actions {
    @apply flex flex-col sm:flex-row flex-wrap gap-3 justify-center lg:justify-start !pt-2;
  }

  /* EXISTING COMPONENTS */
  button, 
  a.btn, 
  input[type="submit"], 
  input[type="button"],
  .button-accessible {
    @apply min-h-[48px] min-w-[48px] inline-flex items-center justify-center;
    touch-action: manipulation;
  }
  
  *:focus-visible {
    @apply outline-2 outline-primary outline-offset-2;
  }

  .dark-bg *:focus-visible,
  footer *:focus-visible,
  .bg-blue-900 *:focus-visible {
    @apply outline-blue-400;
  }

  .nav-link {
    @apply min-h-[48px] inline-flex items-center px-4 text-slate-800 hover:text-secondary hover:underline hover:decoration-2 hover:underline-offset-4 transition-colors font-medium;
  }
  
  .footer-link {
    @apply min-h-[44px] inline-block py-2 px-1 text-slate-300 hover:text-white transition-colors;
  }

  input, textarea, select {
    @apply min-h-[44px] px-4 py-3 border-border focus:border-primary focus:ring-2 focus:ring-primary/20 rounded-lg outline-none transition-all bg-background text-foreground;
  }
}

.hero, .section, .card {
  contain: layout style paint;
}

#root {
  @apply w-full overflow-x-hidden;
  isolation: isolate;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 700;
}

.below-fold {
  content-visibility: auto;
  contain-intrinsic-size: 1px 1000px;
}

@media (max-width: 768px) {
  .btn-mobile-full {
    @apply w-full justify-center;
  }
  
  .mobile-stack > * + * {
    @apply mt-4;
  }
  
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}