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

/* Critical CSS for FCP optimization - optimize font loading to prevent reflows */
@font-face {
  font-family: 'Inter';
  font-weight: 700;
  font-display: optional;
  src: local('Inter');
}

@font-face {
  font-family: 'Inter';
  font-weight: 400;
  font-display: optional;
  src: local('Inter');
}

@layer base {
  /* Performance optimizations to prevent forced reflows */
  * {
    box-sizing: border-box;
  }
  
  img, video, iframe {
    content-visibility: auto;
  }

  :root {
    /* Earth tones - warm, natural palette for retaining walls */
    --background: 30 25% 94%;
    --foreground: 25 35% 20%;
    --card: 30 30% 96%;
    --card-foreground: 25 35% 20%;
    --popover: 30 30% 97%;
    --popover-foreground: 25 35% 20%;
    
    /* Terracotta primary - strong earth tone */
    --primary: 15 65% 45%;
    --primary-foreground: 30 20% 98%;
    
    /* Warm stone secondary */
    --secondary: 30 15% 85%;
    --secondary-foreground: 25 35% 25%;
    
    /* Muted earth */
    --muted: 30 20% 88%;
    --muted-foreground: 25 20% 45%;
    
    /* Clay accent */
    --accent: 20 55% 50%;
    --accent-foreground: 30 20% 98%;
    
    --destructive: 0 84% 60%;
    --destructive-foreground: 30 20% 98%;
    --border: 30 15% 80%;
    --input: 30 20% 90%;
    --ring: 15 65% 45%;
    --radius: 0.5rem;
    
    /* Terracotta/clay CTA elements */
    --orange-brand: 15 75% 55%;
    --orange-hover: 15 75% 45%;
    
    /* Rich earth palette */
    --primary-dark: 25 40% 15%;
    --primary-light: 25 25% 50%;
    --neutral-light: 30 15% 85%;
    --neutral-medium: 30 10% 60%;
    --text-light: 30 20% 98%;
    --overlay: 25 30% 10%;
    
    /* Warm stone/terracotta accents */
    --gold-primary: 25 60% 55%;
    --gold-secondary: 25 45% 40%;
    --gold-muted: 25 30% 30%;
    --bronze-accent: 20 35% 35%;
    
    /* Earth-inspired gradients */
    --gradient-hero: linear-gradient(135deg, hsl(25 30% 10% / 0.85), hsl(15 35% 20% / 0.75));
    --gradient-subtle: linear-gradient(180deg, hsl(30 25% 94%), hsl(25 20% 90%));
    --gradient-premium: linear-gradient(135deg, hsl(15 65% 50%), hsl(20 55% 45%));
    --gradient-card: linear-gradient(145deg, hsl(30 30% 96%), hsl(25 25% 92%));
    
    /* Natural shadows */
    --shadow-minimal: 0 4px 16px -4px hsl(25 20% 20% / 0.15);
    --shadow-card: 0 8px 24px -8px hsl(25 20% 20% / 0.12);
    --shadow-premium: 0 12px 32px -12px hsl(15 40% 25% / 0.18);
    
    --sidebar-background: 30 25% 95%;
    --sidebar-foreground: 25 35% 25%;
    --sidebar-primary: 15 65% 45%;
    --sidebar-primary-foreground: 30 20% 98%;
    --sidebar-accent: 30 20% 88%;
    --sidebar-accent-foreground: 25 35% 25%;
    --sidebar-border: 30 15% 82%;
    --sidebar-ring: 15 65% 50%;
  }

  .dark {
    --background: 0 0% 7%;
    --foreground: 0 0% 95%;
    --card: 0 0% 9%;
    --card-foreground: 0 0% 95%;
    --popover: 0 0% 9%;
    --popover-foreground: 0 0% 95%;
    --primary: 0 0% 90%;
    --primary-foreground: 0 0% 10%;
    --secondary: 0 0% 15%;
    --secondary-foreground: 0 0% 90%;
    --muted: 0 0% 15%;
    --muted-foreground: 0 0% 60%;
    --accent: 45 75% 65%;
    --accent-foreground: 0 0% 10%;
    --destructive: 0 63% 31%;
    --destructive-foreground: 0 0% 95%;
    --border: 0 0% 20%;
    --input: 0 0% 18%;
    --ring: 0 0% 70%;
    
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

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

@layer components {
  /* Performance: Prevent layout thrashing with CSS containment */
  section {
    contain: layout style;
  }
  
  /* Performance: Use content-visibility for off-screen sections */
  section:not(:first-of-type) {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
  }
  
  /* GPU acceleration for animations - target specific elements only */
  .animate-fade-in,
  .animate-scale-in,
  .animate-slide-in-right,
  [class*="animate-"] {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  
  /* Optimize interactive elements - prevent forced reflows */
  button, a {
    will-change: auto;
  }
  
  button:hover, button:focus, a:hover, a:focus {
    will-change: transform;
  }
  
  .hero-overlay {
    background: var(--gradient-hero);
  }
  
  .gradient-subtle {
    background: var(--gradient-subtle);
  }
  
  .shadow-minimal {
    box-shadow: var(--shadow-minimal);
  }
  
  .shadow-card {
    box-shadow: var(--shadow-card);
  }
  
  .shadow-premium {
    box-shadow: var(--shadow-premium);
  }
  
  .gradient-premium {
    background: var(--gradient-premium);
  }
  
  .gradient-card {
    background: var(--gradient-card);
  }
  
  .text-shadow {
    text-shadow: 0 2px 4px hsl(0 0% 0% / 0.4);
  }
  
  .text-shadow-gold {
    text-shadow: 0 2px 4px hsl(45 25% 25% / 0.3);
  }
  
  /* Critical LCP optimization for hero text - immediate render */
  .hero-text-critical {
    font-family: Inter, system-ui, -apple-system, sans-serif;
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Immediate paint without waiting for animations */
    contain: layout paint;
    content-visibility: visible;
    /* Render text shadow immediately for LCP */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  }

  /* Enhanced shadow after initial paint */
  .hero-text-critical.loaded {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  }
}