/* Font imports moved to async loading in index.html for better LCP */


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

@font-face {
  font-family: 'Dylign Sans';
  src: url('/fonts/dylign.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --background: hsl(0, 0%, 100%);
  --foreground: hsl(210, 25%, 7.8431%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(210, 25%, 7.8431%);
  --popover: hsl(0, 0%, 100%);
  --popover-foreground: hsl(210, 25%, 7.8431%);
  --primary: hsl(18, 96%, 49%);
  --primary-foreground: hsl(0, 0%, 100%);
  --secondary: hsl(210, 40%, 98%);
  --secondary-foreground: hsl(222.2, 84%, 4.9%);
  --muted: hsl(210, 40%, 96%);
  --muted-foreground: hsl(215.4, 16.3%, 46.9%);
  --accent: hsl(210, 40%, 96%);
  --accent-foreground: hsl(222.2, 84%, 4.9%);
  --destructive: hsl(0, 84.2%, 60.2%);
  --destructive-foreground: hsl(210, 40%, 98%);
  --border: hsl(214.3, 31.8%, 91.4%);
  --input: hsl(214.3, 31.8%, 91.4%);
  --ring: hsl(18, 96%, 49%);
  --chart-1: hsl(18, 96%, 49%);
  --chart-2: hsl(173, 58%, 39%);
  --chart-3: hsl(197, 37%, 24%);
  --chart-4: hsl(43, 74%, 66%);
  --chart-5: hsl(27, 87%, 67%);
  --radius: 1.5rem;
  --dylign-orange: hsl(18, 96%, 49%);
  --dylign-dark: hsl(220, 18%, 20%);
}

.dark {
  --background: hsl(222.2, 84%, 4.9%);
  --foreground: hsl(210, 40%, 98%);
  --card: hsl(222.2, 84%, 4.9%);
  --card-foreground: hsl(210, 40%, 98%);
  --popover: hsl(222.2, 84%, 4.9%);
  --popover-foreground: hsl(210, 40%, 98%);
  --primary: hsl(18, 96%, 49%);
  --primary-foreground: hsl(0, 0%, 100%);
  --secondary: hsl(217.2, 32.6%, 17.5%);
  --secondary-foreground: hsl(210, 40%, 98%);
  --muted: hsl(217.2, 32.6%, 17.5%);
  --muted-foreground: hsl(215, 20.2%, 65.1%);
  --accent: hsl(217.2, 32.6%, 17.5%);
  --accent-foreground: hsl(210, 40%, 98%);
  --destructive: hsl(0, 62.8%, 30.6%);
  --destructive-foreground: hsl(210, 40%, 98%);
  --border: hsl(217.2, 32.6%, 17.5%);
  --input: hsl(217.2, 32.6%, 17.5%);
  --ring: hsl(18, 96%, 49%);
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Mobile-first responsive styles */
@media (max-width: 768px) {
  /* Header adjustments */
  .header-mobile {
    padding: 12px 20px;
    height: 64px; /* Fixed header height for viewport calculations */
  }
  
  .header-logo {
    font-size: 1.5rem;
  }
  
  .header-cta {
    padding: 8px 16px;
    font-size: 0.875rem;
  }
  
  /* Hero section mobile - fluid height to ensure visibility */
  .hero-mobile {
    min-height: calc(100vh - 64px); /* Viewport minus header height */
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .hero-title-mobile {
    font-size: 2.25rem;
    line-height: 1.2;
    margin-bottom: 1rem;
  }
  
  .hero-subtitle-mobile {
    font-size: 1.125rem;
    line-height: 1.4;
    margin-bottom: 2rem;
  }
  
  .hero-cta-mobile {
    width: 100%;
    max-width: 280px;
    padding: 14px 24px;
    font-size: 1rem;
  }
  
  /* Feature tiles mobile - unified heights and typography */
  .feature-grid-mobile {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .feature-card-mobile {
    min-height: 280px; /* Unified card height */
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .feature-title-mobile {
    font-size: 1.5rem; /* Unified title size for all cards */
    line-height: 1.3;
    margin-bottom: 0.75rem;
    font-weight: bold;
  }
  
  .feature-description-mobile {
    font-size: 0.9375rem;
    line-height: 1.5;
    margin-bottom: auto; /* Push CTA to bottom */
    flex-grow: 1;
  }
  
  .feature-cta-mobile {
    width: 100%;
    padding: 12px 20px;
    font-size: 0.9375rem;
    margin-top: 1.5rem; /* Consistent CTA positioning */
  }
  
  /* Product showcase mobile */
  .product-grid-mobile {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .product-showcase-cta-mobile {
    width: 100%;
    max-width: 320px;
    padding: 14px 24px;
    margin: 2rem auto 0;
  }
}

/* Mobile layout fixes for ≤480px */
@media (max-width: 480px) {
  /* Fixed header height */
  header {
    height: 64px !important;
  }
  
  /* Hero - ensure full visibility on iPhone 13/14 (375×812) */
  .hero-mobile {
    min-height: calc(100vh - 64px) !important;
    padding: 30px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  
  .hero-title-mobile {
    font-size: 2rem !important;
    line-height: 1.1 !important;
  }
  
  .hero-subtitle-mobile {
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }
  
  /* Feature cards - unified heights and typography */
  .feature-card-mobile {
    min-height: 280px !important; /* Same height as green card */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }
  
  /* Unified heading sizes - match third card exactly */
  .feature-title-mobile {
    font-size: 1.5rem !important; /* Consistent across all cards */
    line-height: 1.3 !important;
    font-weight: bold !important;
    margin-bottom: 0.75rem !important;
  }
  
  .feature-description-mobile {
    flex-grow: 1 !important;
    margin-bottom: auto !important;
  }
  
  /* Align all CTAs to same vertical position */
  .feature-cta-mobile {
    margin-top: 1.5rem !important;
    align-self: stretch !important;
  }
  
  /* Product grid single column on very small screens */
  .product-grid-mobile {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

.font-dylign {
  font-family: 'Dylign Sans', 'Inter', system-ui, sans-serif;
}

.smooth-scroll {
  scroll-behavior: smooth;
}

.hero-gradient {
  background: linear-gradient(135deg, #F97316 0%, #F25C05 50%, #E94A02 100%);
}

.text-hero-shadow {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.button-elevated {
  box-shadow: 0 4px 14px 0 rgba(242, 92, 5, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.card-shadow {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.backdrop-blur-sm {
  backdrop-filter: blur(8px);
}

/* Custom animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0; 
    transform: translateY(30px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

.animate-fade-in {
  animation: fadeIn 0.6s ease-out;
}

.animate-slide-up {
  animation: slideUp 0.8s ease-out;
}

/* Performance optimizations */
.animate-fade-in,
.animate-slide-up,
[class*="hover:scale-"],
[class*="hover:shadow-"] {
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* CSS Tree Shaking - Only include used Tailwind classes */
/* Remove unused utility classes in production */

/* Optimize font loading */
@font-face {
  font-family: 'Dylign Sans';
  src: url('/fonts/dylign.woff2') format('woff2');
  font-display: swap;
  font-weight: 100 900;
}

/* Critical CSS moved to HTML head for render optimization */
/* Non-critical styles loaded asynchronously */

/* Optimize animations for 60fps */
@keyframes fadeIn {
  from { opacity: 0; transform: translate3d(0, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes slideUp {
  from { 
    opacity: 0; 
    transform: translate3d(0, 30px, 0); 
  }
  to { 
    opacity: 1; 
    transform: translate3d(0, 0, 0); 
  }
}

/* Reduce layout thrashing */
.prevent-layout-shift {
  contain: layout style paint;
}