@theme {
  --font-sans: "Inter", sans-serif;
  --font-display: "Space Grotesk", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --color-brand: #52AA41;
}

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;
  background-color: #52AA41;
  color: #ffffff;
  border-radius: 9999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 2px solid #52AA41;
  box-shadow: 0 4px 14px rgba(11, 114, 79, 0.15);
  transition: all 0.2s ease-in-out;
}

.clay-btn:hover {
  background-color: #08543a;
  border-color: #08543a;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(11, 114, 79, 0.25);
}

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

/* 
  Unified green tag border definition to match index Solutions tag
*/
.border-emerald-150 {
  border-color: rgba(82, 170, 65, 0.25) !important;
}