/* ============================================================================
   W.B.Child — THEME BRIDGE
   Applica il design system (wbc-ui.css) ai componenti Metronic/kt-* e alle
   utility del progetto, senza modificare le pagine. Caricare DOPO il CSS
   Metronic e DOPO wbc-ui.css.
   Verde = sistema (link/focus/azioni) · Ambra = brand (wbc-grad, VGEM).
   ============================================================================ */

/* ── Base: fondo chiaro, testo slate, font ──────────────────────────────── */
body { background: var(--wbc-bg); color: var(--wbc-ink); font-family: var(--wbc-font-body); }
h1,h2,h3,h4,h5,h6,.font-display,.kt-card-title,.kt-heading {
  font-family: var(--wbc-font-heading) !important; letter-spacing:-.012em;
}

/* ── Link, focus, selezione ─────────────────────────────────────────────── */
a { color: var(--wbc-primary); text-underline-offset:3px; }
a:hover { color: var(--wbc-primary-700); }
:focus-visible { outline: 2px solid var(--wbc-primary) !important; outline-offset:2px; }
::selection { background: color-mix(in srgb, var(--wbc-primary) 22%, transparent); }
.text-primary, .kt-menu-item.active > .kt-menu-link, .kt-menu-link.active,
.kt-menu-link:hover { color: var(--wbc-primary) !important; }

/* ── Superfici / card: bianche, arrotondate, ombra morbida ──────────────── */
.kt-card {
  background: var(--wbc-surface); border:1px solid var(--wbc-border);
  border-radius: var(--wbc-radius-lg); box-shadow: var(--wbc-shadow-sm);
}
.kt-card-title { font-size:1.05rem; }
.rounded-xl,.rounded-2xl,.rounded-3xl { border-radius: var(--wbc-radius-lg) !important; }

/* ── Gradiente brand: ambra (era oro) · testo brand ambra ───────────────── */
.wbc-grad { background: var(--wbc-grad-brand) !important; }
.wbc-grad-text {
  background:none !important; -webkit-text-fill-color: currentColor !important;
  color: var(--wbc-accent-700) !important;
}

/* ── Bottoni ────────────────────────────────────────────────────────────── */
.kt-btn {
  border-radius:12px !important; font-family: var(--wbc-font-heading);
  font-weight:600; transition: background .15s ease, filter .15s ease;
}
/* CTA brand (i vecchi bottoni "oro") → ambra, testo scuro leggibile */
.kt-btn.wbc-grad, .kt-btn.wbc-grad.text-black, .kt-btn.wbc-grad.text-white {
  background: var(--wbc-grad-brand) !important; color:#241606 !important; border:none !important;
}
.kt-btn.wbc-grad:hover { filter:saturate(1.05) brightness(.98); }
/* azione primaria di sistema → verde */
.kt-btn-primary, .btn-primary { background: var(--wbc-primary) !important; color:#fff !important; border:none !important; }
.kt-btn-primary:hover, .btn-primary:hover { background: var(--wbc-primary-600) !important; }
/* secondari / outline → bianco, bordo tenue */
.kt-btn-outline, .kt-btn-secondary {
  background: var(--wbc-surface) !important; border:1px solid var(--wbc-border) !important; color: var(--wbc-ink) !important;
}
.kt-btn-outline:hover, .kt-btn-secondary:hover { background: var(--wbc-surface-2) !important; }

/* ── Form ───────────────────────────────────────────────────────────────── */
.kt-input,
input[type="text"],input[type="email"],input[type="password"],
input[type="search"],input[type="number"],input[type="tel"],input[type="url"],select,textarea,textarea.kt-input {
  background: var(--wbc-surface) !important; border:1px solid var(--wbc-border) !important;
  border-radius:12px !important; color: var(--wbc-ink) !important; caret-color: var(--wbc-primary);
}
.kt-input:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  border-color: var(--wbc-primary) !important; outline:none !important;
  box-shadow:0 0 0 3px var(--wbc-primary-050) !important;
}
input[type="checkbox"]:checked,input[type="radio"]:checked,.kt-checkbox:checked { accent-color: var(--wbc-primary); }

/* ── Badge → chip ───────────────────────────────────────────────────────── */
.kt-badge { border-radius:999px !important; font-weight:600; }
.kt-badge-outline { border:1px solid var(--wbc-border) !important; color: var(--wbc-muted) !important; background:transparent !important; }
.kt-badge-primary { background: var(--wbc-primary-050) !important; color: var(--wbc-primary-700) !important; }
.kt-badge-success { background: var(--wbc-primary-050) !important; color: var(--wbc-primary-700) !important; }
.kt-badge-warning { background: var(--wbc-accent-050) !important; color: var(--wbc-accent-700) !important; }
.kt-badge-secondary { background: var(--wbc-surface-2) !important; color: var(--wbc-muted) !important; }

/* ── Alert ──────────────────────────────────────────────────────────────── */
.kt-alert { border-radius: var(--wbc-radius); border:1px solid var(--wbc-border); }
.kt-alert-success { background: var(--wbc-primary-050); color: var(--wbc-primary-700); }
.kt-alert-warning { background: var(--wbc-accent-050); color: var(--wbc-accent-700); }
.kt-alert-error, .kt-alert-danger, .kt-alert-destructive { background:#fdecea; color:#a5352a; }

/* ── Testo secondario coerente ──────────────────────────────────────────── */
.text-secondary-foreground,.text-muted-foreground { color: var(--wbc-muted); }
.text-mono { color: var(--wbc-ink); }

/* ── Immagini "washed" (facoltativo, per foto morbide) ──────────────────── */
.washed { filter: saturate(.92) contrast(.96); border-radius: var(--wbc-radius-lg); }