/**
 * I componenti di base, costruiti sui valori di tokens.css.
 *
 * Qui non compare nessun colore scritto a mano: solo variabili. Se serve una
 * tinta che non c'e', si aggiunge ai token, non qui.
 */

/* --- PULSANTI -------------------------------------------------------
   Primario blu, secondario antracite chiaro. Nessuna ombra: lo stato
   premuto si dice col colore, non col rilievo. */

.ba-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ba-space-2);
  padding: var(--ba-space-3) var(--ba-space-5);
  font-family: var(--ba-font);
  font-size: var(--ba-text-sm);
  font-weight: var(--ba-weight-medium);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--ba-radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--ba-fast) var(--ba-ease),
              border-color var(--ba-fast) var(--ba-ease);
}

.ba-btn--primary {
  background: var(--ba-blue);
  color: var(--ba-ink-invert);
}
.ba-btn--primary:hover  { background: var(--ba-blue-hover); color: var(--ba-ink-invert); }
.ba-btn--primary:active { background: var(--ba-blue-active); }

.ba-btn--secondary {
  background: var(--ba-slate);
  color: var(--ba-slate-ink);
}
.ba-btn--secondary:hover { background: var(--ba-slate-hover); color: var(--ba-slate-ink); }

/* Terziario: solo testo, per le azioni che non devono attirare. */
.ba-btn--ghost {
  background: transparent;
  color: var(--ba-ink-soft);
  padding-left: var(--ba-space-3);
  padding-right: var(--ba-space-3);
}
.ba-btn--ghost:hover { background: var(--ba-surface-alt); color: var(--ba-ink); }

.ba-btn:disabled,
.ba-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

/* Il contorno di messa a fuoco non si toglie mai: serve a chi naviga da
   tastiera. Si rende solo piu' discreto. */
.ba-btn:focus-visible,
.ba-input:focus-visible {
  outline: 2px solid var(--ba-blue);
  outline-offset: 2px;
}

/* --- SCHEDE ---------------------------------------------------------
   Bordo di un pixel, niente ombra. L'ombra arriva solo al passaggio del
   mouse su una scheda cliccabile, e resta appena percettibile. */

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

.ba-card--link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--ba-fast) var(--ba-ease),
              box-shadow var(--ba-fast) var(--ba-ease);
}
.ba-card--link:hover {
  border-color: var(--ba-border-strong);
  box-shadow: var(--ba-shadow-float);
}

.ba-card__body { padding: var(--ba-space-5); }

/* --- ETICHETTE ------------------------------------------------------
   L'unico posto dove la forma a pillola e' ammessa. */

.ba-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--ba-space-1);
  padding: var(--ba-space-1) var(--ba-space-3);
  font-size: var(--ba-text-xs);
  font-weight: var(--ba-weight-medium);
  border-radius: var(--ba-radius-pill);
  background: var(--ba-surface-alt);
  color: var(--ba-ink-soft);
}
.ba-tag--info  { background: var(--ba-blue-soft);  color: var(--ba-blue-active); }
.ba-tag--ok    { background: var(--ba-ok-soft);    color: var(--ba-ok); }
.ba-tag--warn  { background: var(--ba-warn-soft);  color: var(--ba-warn); }
.ba-tag--error { background: var(--ba-error-soft); color: var(--ba-error); }

/* Accento caldo: per cio' che deve farsi notare senza essere un'azione,
   tipo "ultimo disponibile" o un prezzo in evidenza. */
.ba-tag--accent { background: var(--ba-accent-soft); color: var(--ba-accent-ink); }

/* Sottolineatura d'accento: una riga sotto un titolo di sezione, o il
   bordo di un elemento scelto nel calendario. */
.ba-accent-line { border-bottom: 2px solid var(--ba-accent); }
.ba-accent-mark { color: var(--ba-accent-ink); font-weight: var(--ba-weight-medium); }

/* --- TESTO ----------------------------------------------------------- */

.ba-title    { font-size: var(--ba-text-xl); font-weight: var(--ba-weight-bold);
               line-height: var(--ba-leading-tight); color: var(--ba-ink); margin: 0; }
.ba-subtitle { font-size: var(--ba-text-sm); color: var(--ba-ink-soft);
               line-height: var(--ba-leading-base); margin: 0; }
.ba-meta     { font-size: var(--ba-text-sm); color: var(--ba-ink-faint); }

/* --- CAMPI ----------------------------------------------------------- */

.ba-input {
  width: 100%;
  padding: var(--ba-space-3) var(--ba-space-4);
  font-family: var(--ba-font);
  font-size: var(--ba-text-base);
  color: var(--ba-ink);
  background: var(--ba-surface);
  border: 1px solid var(--ba-border);
  border-radius: var(--ba-radius-sm);
  transition: border-color var(--ba-fast) var(--ba-ease);
}
.ba-input:hover { border-color: var(--ba-border-strong); }
.ba-input::placeholder { color: var(--ba-ink-faint); }

/* --- ICONE -----------------------------------------------------------
   Phosphor, peso regular: libere (licenza MIT), novemila simboli, e
   distinguono BlueApulia da PAF che usa Font Awesome. Sostituiscono le
   emoji, che cambiano forma da un dispositivo all'altro. */

.ba-icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.18em;
  flex: none;
}
.ba-icon--soft { color: var(--ba-ink-soft); }

/* Riga di dati con icona: "8 ospiti", "2 bagni". */
.ba-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ba-space-4);
  font-size: var(--ba-text-sm);
  color: var(--ba-ink-soft);
}
.ba-facts__item { display: inline-flex; align-items: center; gap: var(--ba-space-2); }

/* --- TESTO MAI BLU ---------------------------------------------------
   Il blu e' il colore delle AZIONI: pulsanti, e nient'altro. Un testo blu
   in mezzo al contenuto sembra un collegamento anche quando non lo e', e
   sporca una pagina che vive di bianco e antracite.

   I collegamenti dentro il contenuto si distinguono con la sottolineatura,
   non col colore: e' anche piu' leggibile per chi non distingue bene le
   tinte. Il tema padre li colora di blu, quindi qui si annulla. */

body { background: var(--ba-canvas); }

/* I titoli non sono collegamenti: il tema padre li colora di blu, qui no.
   Il blu resta ai pulsanti. */
h1, h2, h3, h4, h5, h6,
.mk__title, .mk__sec h2, .ba-title { color: var(--ba-ink); }

a { color: inherit; }

.ba-content a,
.entry-content a,
.mk__text a {
  color: var(--ba-ink);
  text-decoration: underline;
  text-decoration-color: var(--ba-border-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--ba-fast) var(--ba-ease);
}
.ba-content a:hover,
.entry-content a:hover,
.mk__text a:hover { text-decoration-color: var(--ba-ink); }

/* L'unica eccezione: i collegamenti d'azione, quelli che portano a fare
   qualcosa e che non stanno dentro un discorso. */
.ba-link-action {
  color: var(--ba-blue);
  text-decoration: none;
  font-weight: var(--ba-weight-medium);
}
.ba-link-action:hover { color: var(--ba-blue-hover); text-decoration: underline; }