/* Mousikè theme tokens — HSL values match the original site */
:root {
  --background: 40 20% 98%;
  --foreground: 220 20% 14%;
  --card: 0 0% 100%;
  --card-foreground: 220 20% 14%;
  --primary: 24 85% 52%;
  --primary-foreground: 0 0% 100%;
  --secondary: 40 15% 94%;
  --secondary-foreground: 220 20% 14%;
  --muted: 40 10% 93%;
  --muted-foreground: 220 10% 40%;
  --accent: 40 15% 94%;
  --border: 40 10% 88%;
  --input: 40 10% 88%;
  --ring: 24 85% 52%;
  --destructive: 0 84% 60%;
  --radius: 0.75rem;
}

/* Font stack: Inter come primario (consistente ovunque, look SF-Pro-like).
   Fallback a SF Pro su Apple, poi system fonts. */
html {
  font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  font-feature-settings: "cv02", "cv03", "cv04", "cv11"; /* Inter stylistic alternates — numeri più moderni */
}

body {
  font-family: "Inter", "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ───────── Scrollbar personalizzata ─────────
   Minimalista, in armonia con la palette del sito.
   Pill sottile grigio-scura, si schiarisce all'hover. */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--foreground) / 0.25);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--foreground) / 0.5);
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:active {
  background: hsl(var(--primary));
  background-clip: content-box;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--foreground) / 0.3) transparent;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.2s;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.btn-primary:hover { background: hsl(var(--primary) / 0.9); }

.btn-outline {
  background: transparent;
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}
.btn-outline:hover { background: hsl(var(--secondary)); }

.btn-ghost {
  background: transparent;
  color: hsl(var(--foreground));
}
.btn-ghost:hover { background: hsl(var(--secondary)); }

.btn-outline-light {
  background: transparent;
  color: white;
  border-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(4px);
}
.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.8);
}

.btn-danger {
  background: hsl(var(--destructive));
  color: white;
}
.btn-danger:hover { background: hsl(var(--destructive) / 0.9); }

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
}

.chip-primary {
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
}

.input, .textarea, .select {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  font-size: 0.9375rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.15);
}

.textarea { min-height: 8rem; resize: vertical; }

.label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
  color: hsl(var(--foreground));
}

.card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
}

.section-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.fade-in {
  animation: fade-in 0.5s ease-out;
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Nasconde la scrollbar (per caroselli orizzontali scroll-snap) */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Marquee partner — solo layout. L'animazione è gestita in JS (vedi base.html). */
.partners-marquee {
  display: flex;
  width: max-content;
  will-change: transform;
}

/* Lenis smooth scroll — stili richiesti dalla libreria */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }