:root{
  /* Gray scale */
  --gray-900: #0F1720;
  --gray-700: #374151;
  --gray-400: #9CA3AF;
  --gray-100: #F3F4F6;

  /* Green brand scale */
  --green-900: #014F49;
  --green-600: #017F7C; /* primary */
  --green-400: #38B48F;
  --green-200: #DFF7EE;

  /* Secondary */
  --teal-500: #2F6F86;

/* Accent */
  --accent-500: #FF7A45;

  /* Yellow / orange for small accents (used sparingly) */
  --yellow-500: #F1C40F;
  --orange-500: #F39C12;

  /* Slate for industrial / neutral headers */
  --slate-600: #64748B;
  --indigo-600: #5C6AC4;

  /* WhatsApp only (icon) */

  /* WhatsApp only (icon) */
  --whatsapp: #25D366;

  /* Common */
  --white: #FFFFFF;
  --black: #000000;
}

/* Example usage */
body{
  background: var(--gray-100);
  color: var(--gray-900);
}

/* Header */
header{
  background: var(--white);
  color: var(--gray-900);
  border-bottom: 1px solid rgba(15,23,32,0.06);
}

/* Nav links */
.nav-links a{
  color: var(--gray-700);
}
.nav-links a.active,
.nav-links a:hover{
  color: var(--green-600);
  text-decoration: none;
}

/* Hero */
.hero{
  background: linear-gradient(180deg, rgba(3, 56, 55, 0.06), var(--gray-100));
}
.hero h1{ color: var(--gray-900); }
.hero p{ color: var(--gray-700); }

/* Primary CTA */
.cta-button{
  background: var(--green-600);
  color: var(--white);
  border-radius: 999px;
  padding: 12px 26px;
  display:inline-block;
  text-decoration:none;
  box-shadow: 0 8px 24px rgba(1,127,124,0.12);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cta-button:hover{ transform: translateY(-3px); background: var(--green-900); box-shadow: 0 12px 36px rgba(1,79,73,0.18); }

/* Secondary CTA (e.g. video / call) */
.cta-secondary{
  background: transparent;
  color: var(--teal-500);
  border: 1px solid rgba(47,111,134,0.12);
}

/* WhatsApp small badge (only icon use) */
.whatsapp-badge{
  background: var(--whatsapp);
  color: var(--white);
  padding: 8px 12px;
  border-radius: 999px;
  font-weight:700;
  font-size:0.95rem;
}

/* Cards */
.product-card{
  background: var(--white);
  border: 1px solid rgba(15,23,32,0.04);
  color: var(--gray-900);
}
.product-card .strip{
  height:6px;
  background: linear-gradient(90deg, var(--green-600), var(--teal-500));
}

/* Badges */
.pill{
  background: var(--green-200);
  color: var(--green-900);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight:600;
  font-size:0.85rem;
}
/* Product header variants (used in timagrid rendering) */
.product-card-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.product-card-header.p-6{ padding:1.5rem; }
.product-header--green{ background: linear-gradient(90deg, var(--green-600), var(--green-400)); }
.product-header--teal { background: linear-gradient(90deg, var(--teal-500), var(--green-400)); }
.product-header--accent { background: linear-gradient(90deg, var(--accent-500), var(--green-600)); }
.product-header--yellow { background: linear-gradient(90deg, var(--yellow-500), var(--orange-500)); color: var(--black); }
.product-header--slate { background: linear-gradient(90deg, var(--slate-600), var(--gray-400)); }
.product-header--indigo { background: linear-gradient(90deg, var(--indigo-600), var(--teal-500)); }
.product-card-header, .product-card-header * { color: var(--white); }

/* Service hero small reusable blocks replacing inline gradients */
.service-hero{
  width:100%;
  height:400px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--white);
  font-size:1.5rem;
  font-weight:700;
  border-radius: 8px;
}
.service-hero--climatisation { background: linear-gradient(135deg, var(--teal-500), var(--green-400)); }
.service-hero--elec { background: linear-gradient(135deg, var(--orange-500), var(--accent-500)); }
.service-hero--solar { background: linear-gradient(135deg, var(--yellow-500), var(--orange-500)); color: var(--black); }
.service-hero--maintenance { background: linear-gradient(135deg, var(--gray-400), var(--slate-600)); }

/* Small utility class replacement for WhatsApp badge already used */
.whatsapp-badge{ display:inline-block; padding:10px 16px; border-radius:999px; background:var(--whatsapp); color:var(--white); font-weight:700; text-decoration:none; box-shadow: 0 6px 18px rgba(37, 211, 102, 0.12); }

/* Submit button (form) standardized */
.submit-btn{ padding: 12px 20px; border-radius: 8px; background: var(--green-600); color: var(--white); font-weight: 600; border: none; cursor: pointer; transition: background .12s ease, transform .12s ease; }
.submit-btn:hover{ background: var(--green-900); transform: translateY(-2px); }
/* Aggiunte palette / componenti per uniformare il sito */
:root{
  --yellow-500: #F1C40F;
  --orange-500: #F39C12;
  --slate-600: #64748B;
  --indigo-600: #5C6AC4;
}

/* Product header variants (usate in catalogue.html) */
.product-card-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.product-card-header.p-6{ padding:1.5rem; }
.product-header--green{ background: linear-gradient(90deg, var(--green-600), var(--green-400)); }
.product-header--teal { background: linear-gradient(90deg, var(--teal-500), var(--green-400)); }
.product-header--accent { background: linear-gradient(90deg, var(--accent-500), var(--green-600)); }
.product-header--yellow { background: linear-gradient(90deg, var(--yellow-500), var(--orange-500)); color: var(--black); }
.product-header--slate { background: linear-gradient(90deg, var(--slate-600), var(--gray-400)); }
.product-header--indigo { background: linear-gradient(90deg, var(--indigo-600), var(--teal-500)); }
.product-card-header, .product-card-header * { color: var(--white); }

/* Service hero small reusable blocks (rimpiazzano i gradienti inline) */
.service-hero{
  width:100%;
  height:400px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--white);
  font-size:1.5rem;
  font-weight:700;
  border-radius: 8px;
}
.service-hero--climatisation { background: linear-gradient(135deg, var(--teal-500), var(--green-400)); }
.service-hero--elec { background: linear-gradient(135deg, var(--orange-500), var(--accent-500)); }
.service-hero--solar { background: linear-gradient(135deg, var(--yellow-500), var(--orange-500)); color: var(--black); }
.service-hero--maintenance { background: linear-gradient(135deg, var(--gray-400), var(--slate-600)); }

/* Standardizzazione pulsanti e badge */
.whatsapp-badge{ display:inline-block; padding:10px 16px; border-radius:999px; background:var(--whatsapp); color:var(--white); font-weight:700; text-decoration:none; box-shadow: 0 6px 18px rgba(37, 211, 102, 0.12); }
.submit-btn{ padding: 12px 20px; border-radius: 8px; background: var(--green-600); color: var(--white); font-weight: 600; border: none; cursor: pointer; transition: background .12s ease, transform .12s ease; }
.submit-btn:hover{ background: var(--green-900); transform: translateY(-2px); }

/* Post-it (meno aggressivo) */
.postit{
  background: linear-gradient(135deg, rgba(255,238,160,1), rgba(255, 241, 118,1));
  border: 1px solid rgba(0,0,0,0.06);
  color: var(--gray-900);
}