@theme {
  --font-sans: "Inter", sans-serif;
  --font-display: "Space Grotesk", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --color-brand: #52AA41;
  --color-emerald-50: #f4faf3;
  --color-emerald-100: #e3f4e1;
  --color-emerald-200: #c4e7c0;
  --color-emerald-250: #a2d99c;
  --color-emerald-300: #93d28d;
  --color-emerald-400: #71c068;
  --color-emerald-500: #52AA41;
  --color-emerald-600: #418f32;
  --color-emerald-700: #326f26;
  --color-emerald-800: #24511c;
  --color-emerald-900: #183613;
  --color-emerald-950: #0c1c09;
}

html {
  font-size: 115.5% !important;
}

/* 
  Reduce layout max-widths to make the user experience more contained,
  compact, and cohesive on large screens, preventing content from spreading too wide.
*/
.max-w-7xl {
  max-width: 66rem !important;
}
.max-w-5xl {
  max-width: 52rem !important;
}
.max-w-4xl {
  max-width: 46rem !important;
}
.max-w-3xl {
  max-width: 40rem !important;
}

/* 
  Override hardcoded absolute pixel classes so they scale up "1 level larger" 
  in tandem with our global rem/percentage font-size upgrade.
*/
.text-\[7\.5px\] {
  font-size: 9px !important;
}
.text-\[8px\] {
  font-size: 10px !important;
}
.text-\[8\.5px\] {
  font-size: 10.5px !important;
}
.text-\[9px\] {
  font-size: 11px !important;
}
.text-\[10px\] {
  font-size: 12px !important;
}
.text-\[10\.5px\] {
  font-size: 12.5px !important;
}
.text-\[11px\] {
  font-size: 13px !important;
}
.text-\[11\.5px\] {
  font-size: 13.5px !important;
}

/* 
  Make primary buttons (.clay-btn) one level smaller in font size.
  Standard buttons go from 0.75rem down to 0.6875rem.
*/
.clay-btn {
  font-size: 0.6875rem !important;
}

/* Maintain proportional scale for specific custom-padded utility buttons */
.clay-btn.text-\[9px\] {
  font-size: 9.5px !important;
}
.clay-btn.text-\[10px\] {
  font-size: 11px !important;
}

/* 
  Hero Carousel Full-Width & Auto-Height Presentation
  Ensure all carousel images fill 100% of container width with auto height and zero padding.
*/
#service-carousel-container,
#stage-carousel-container {
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

#service-carousel-container img,
#stage-carousel-container img,
#carousel-main-image {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
  margin: 0 !important;
}