/* LUCHE — VAN TO GO · Component classes (used by the JSX primitives) */

/* ── Button ── */
.lvt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.lvt-btn:active { transform: translateY(1px); }
.lvt-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.lvt-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.lvt-btn--md { font-size: 14px; padding: 12px 22px; }
.lvt-btn--sm { font-size: 12px; padding: 8px 14px; }
.lvt-btn--lg { font-size: 16px; padding: 16px 32px; }

.lvt-btn--primary { background: var(--action-primary); color: var(--text-on-primary); }
.lvt-btn--primary:hover:not(:disabled) { background: var(--action-primary-hover); }

.lvt-btn--cta { background: var(--action-cta); color: #fff; }
.lvt-btn--cta:hover:not(:disabled) { background: var(--action-cta-hover); }

.lvt-btn--secondary {
  background: transparent;
  color: var(--action-primary);
  border-color: var(--action-primary);
}
.lvt-btn--secondary:hover:not(:disabled) { background: var(--blue-050); }

.lvt-btn--gold { background: var(--araw-gold); color: var(--dagat-navy); }
.lvt-btn--gold:hover:not(:disabled) { background: var(--gold-600); }

.lvt-btn--ghost { background: transparent; color: var(--action-primary); }
.lvt-btn--ghost:hover:not(:disabled) { background: var(--blue-050); }

/* On dark surfaces */
.lvt-btn--inverse {
  background: transparent;
  color: var(--pearl-white);
  border-color: var(--pearl-white);
}
.lvt-btn--inverse:hover:not(:disabled) { background: rgba(248, 246, 240, 0.12); }

/* ── Badge ── */
.lvt-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 12px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
}
.lvt-badge--gold { background: var(--araw-gold); color: var(--dagat-navy); }
.lvt-badge--blue { background: var(--bayani-blue); color: #fff; }
.lvt-badge--red { background: var(--lakas-red); color: #fff; }
.lvt-badge--outline { background: transparent; color: var(--text-body); border-color: var(--line-strong); }
.lvt-badge--wash { background: var(--gold-050); color: var(--dagat-navy); border-color: var(--araw-gold); }

/* ── Card ── */
.lvt-card {
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
.lvt-card--highlight { border-top: var(--border-w-highlight) solid var(--accent-highlight); }
.lvt-card--dark {
  background: var(--surface-dark);
  border-color: var(--navy-900);
  color: var(--text-on-dark);
}
.lvt-card--flat { box-shadow: none; }

/* ── Input ── */
.lvt-field { display: flex; flex-direction: column; gap: 6px; }
.lvt-field__label {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body-sm);
  color: var(--text-body);
}
.lvt-input {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  color: var(--text-body);
  background: #fff;
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.lvt-input::placeholder { color: var(--text-muted); }
.lvt-input:hover { border-color: var(--navy-400); }
.lvt-input:focus {
  outline: none;
  border-color: var(--bayani-blue);
  box-shadow: 0 0 0 3px var(--blue-050);
}
.lvt-field__hint { font-size: var(--text-caption); color: var(--text-muted); }
.lvt-field--error .lvt-input { border-color: var(--lakas-red); }
.lvt-field--error .lvt-field__hint { color: var(--lakas-red); }