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

:root {
  --verde-primary: #5CBF2A; 
  --verde-hover: #4AA61F; 
  --verde-dark: #2d5f16; 
  --nero: #000000;            
  --grigio-light: #f3f4f6;   
  --grigio-medium: #e5e7eb;  
  --grigio-hover: #c2c4c9; 
  --bianco: #ffffff;
}

.hero-bg {
  background-image: url('../img/hero.jpg');
  background-size: cover;
  background-position: center;
}

.btn-primary {
  background-color: var(--verde-primary);
  color: var(--bianco);
  font-weight: 600;
  transition: 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--verde-hover);
}

.btn-secondary {
  background-color: var(--grigio-medium);
  color: var(--bianco);
  font-weight: 600;
  transition: 0.3s ease;
}

.btn-secondary:hover {
  background-color: var(--grigio-hover);
}

.text-brand {
  color: var(--verde-primary);
}

.bg-brand {
  background-color: var(--verde-primary);
}

.section-light {
  background-color: var(--grigio-light);
}

.section-white {
  background-color: var(--bianco);
}