/* ==========================================================================
   1. VARIABILI GLOBALI (Colori di base in formato HSL per Tailwind)
   ========================================================================== */
:root {
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;
  --primary: 221 83% 53%;
  --primary-foreground: 210 40% 98%;
  --accent: 43 96% 56%;
  --surface: 210 40% 96%;
  --surface-2: 210 40% 93%;
  --border: 214 32% 91%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
}

/* ==========================================================================
   2. STILI BASE DEI TAG (Body, Sezioni)
   ========================================================================== */
body { 
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif; 
}

section { 
  padding-top: 2.5rem !important; 
  padding-bottom: 2.5rem !important; 
}

#top { 
  padding-top: 4rem !important; 
}

/* ==========================================================================
   3. CLASSI DI UTILITÀ PERSONALIZZATE (Gradienti, Glow, Elementi specifici)
   ========================================================================== */
.text-gradient-mint {
  background: linear-gradient(to right, hsl(var(--primary)), hsl(var(--accent)));
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent;
}

.glow-mint { 
  box-shadow: 0 0 20px 0 hsl(var(--primary) / 0.4); 
}

.logo-img { 
  max-width: 75px; 
  height: auto; 
  max-height: 30px; 
  object-fit: contain; 
}

/* ==========================================================================
   4. ANIMAZIONI (Keyframes)
   ========================================================================== */
@keyframes scroll { 
  from { 
    transform: translateX(0); 
  } 
  to { 
    transform: translateX(-50%); 
  } 
}