/* ================================================================
   KUHN ELEGANTE — COMPONENTI TRASVERSALI v1.0
   Dipende da tokens.css (caricato prima).
   ================================================================ */

/* ----------------------------------------------------------------
   RESET BASELINE
   ---------------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--ink);
  font-weight: 300;
  line-height: var(--lh-relaxed);
}
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }

/* ----------------------------------------------------------------
   FOCUS
   ---------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ----------------------------------------------------------------
   UTILITY
   ---------------------------------------------------------------- */
.u-upper  { text-transform: uppercase; letter-spacing: var(--ls-label); }
.u-caps   { text-transform: uppercase; letter-spacing: var(--ls-wider); }
.u-label  { font-size: var(--text-sm); letter-spacing: var(--ls-label); text-transform: uppercase; }
.u-eyebrow {
  font-size: var(--text-sm);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--brand);
}

/* ----------------------------------------------------------------
   TIPOGRAFIA DI BASE
   ---------------------------------------------------------------- */
.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-heading);
}
.t-display-xl { font-size: var(--text-4xl); }
.t-display-lg { font-size: var(--text-3xl); }
.t-display-md { font-size: var(--text-2xl); }
.t-display-sm { font-size: var(--text-xl);  }

.t-body-lg { font-size: var(--text-md);   color: var(--grey); line-height: var(--lh-loose); }
.t-body    { font-size: var(--text-base); color: var(--grey); line-height: var(--lh-relaxed); }
.t-body-sm { font-size: 14px;             color: var(--grey); line-height: var(--lh-relaxed); }

/* ----------------------------------------------------------------
   BADGE / CHIP
   Usati per categorie news, servizi, tag.
   ---------------------------------------------------------------- */
.badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid currentColor;
  line-height: 1.4;
}

.badge--brand {
  color: var(--brand);
  border-color: var(--brand);
  background: transparent;
}
.badge--solid {
  color: var(--white);
  background: var(--brand);
  border-color: var(--brand);
}
.badge--ghost {
  color: var(--grey);
  border-color: var(--line);
  background: transparent;
}
.badge--sand {
  color: var(--ink);
  background: var(--sand);
  border-color: transparent;
}

/* ----------------------------------------------------------------
   BOTTONI
   Varianti: .btn (outline), .btn--solid, .btn--ghost, .btn--white
   ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: 14px 28px;
  border: 1px solid var(--brand);
  color: var(--brand);
  background: transparent;
  cursor: pointer;
  transition:
    background var(--trans-micro),
    color var(--trans-micro),
    letter-spacing var(--trans-normal),
    border-color var(--trans-micro);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover {
  background: var(--brand);
  color: var(--white);
  letter-spacing: calc(var(--ls-label) + .04em);
}

.btn--solid {
  background: var(--brand);
  color: var(--white);
  border-color: var(--brand);
}
.btn--solid:hover {
  background: var(--blue-700);
  border-color: var(--blue-700);
  color: var(--white);
}

.btn--ghost {
  border-color: var(--line);
  color: var(--ink);
}
.btn--ghost:hover {
  background: var(--sand);
  border-color: var(--neutral-300);
  color: var(--ink);
  letter-spacing: var(--ls-label);
}

.btn--white {
  border-color: rgba(255,255,255,.6);
  color: var(--white);
}
.btn--white:hover {
  background: var(--white);
  color: var(--brand);
  border-color: var(--white);
  letter-spacing: calc(var(--ls-label) + .04em);
}

/* Bottone solo link sottolineato (CTA inline) */
.btn--link {
  padding: 0;
  border: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  background: transparent;
  color: var(--brand);
  border-radius: 0;
}
.btn--link:hover {
  background: transparent;
  color: var(--brand);
  letter-spacing: calc(var(--ls-label) + .04em);
  border-bottom-width: 1px;
}

/* Dimensioni */
.btn--sm  { font-size: var(--text-xs); padding: 9px 18px; }
.btn--lg  { font-size: 12px; padding: 18px 40px; letter-spacing: .26em; }
.btn--ico { padding: 14px; gap: 0; }  /* solo icona quadrata */

/* Cta "vecchio stile" — mantenuto per retrocompatibilità */
.cta-line {
  display: inline-block;
  color: var(--white);
  font-size: 12px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.7);
  padding-bottom: 6px;
  transition:
    letter-spacing var(--trans-normal),
    border-color var(--trans-normal);
}
.cta-line:hover { border-color: var(--white); letter-spacing: .34em; }
.cta-line:focus-visible { outline-color: var(--white); }

.cta-dark {
  display: inline-block;
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brand);
  border-bottom: 1px solid var(--brand);
  padding-bottom: 5px;
  transition: letter-spacing var(--trans-normal);
}
.cta-dark:hover { letter-spacing: .28em; }

/* ----------------------------------------------------------------
   DIVISORE SEZIONE
   ---------------------------------------------------------------- */
.section-divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* ----------------------------------------------------------------
   EYEBROW (disponibile come classe globale + nelle sezioni)
   ---------------------------------------------------------------- */
.eyebrow {
  font-size: var(--text-sm);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--brand);
}

/* ----------------------------------------------------------------
   FOCUS SU BOTTONI
   ---------------------------------------------------------------- */
.btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
.btn--solid:focus-visible,
.btn--white:focus-visible {
  outline-color: var(--white);
}

/* ----------------------------------------------------------------
   CARD GENERICA
   Base per card-servizi, card-news, card-team.
   Ogni variante specializzata in main.css.
   ---------------------------------------------------------------- */
.card-base {
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: box-shadow var(--trans-hover);
}
.card-base:hover { box-shadow: var(--shadow-lg); }

/* ----------------------------------------------------------------
   MOTION: rispetta prefers-reduced-motion
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}