/* Hostly — tokens de marca (color, letra, botones, radios).
   Editar AQUÍ. Guía: docs/ESTILO.md
*/

:root {
  /* ——— Color (logo: navy + cian) ——— */
  --hostly-primary: #17266b;
  --hostly-on-primary: #ffffff;
  --hostly-secondary: #22cdd8;
  --hostly-on-secondary: #17266b;
  --hostly-background: #f3f6fb;
  --hostly-surface: #ffffff;
  --hostly-muted: #5b6580;
  --hostly-border: #d4dce8;
  --hostly-success: #2f6b4f;
  --hostly-shadow: rgba(23, 38, 107, 0.22);

  /* ——— Letra ——— */
  --hostly-font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --hostly-font-mono: ui-monospace, Consolas, "Liberation Mono", monospace;
  --hostly-size-xs: 0.75rem;
  --hostly-size-sm: 0.85rem;
  --hostly-size-md: 1rem;
  --hostly-size-lg: 1.15rem;
  --hostly-size-xl: 1.2rem;
  --hostly-size-hero: clamp(2rem, 5vw, 3.4rem);
  --hostly-weight: 400;
  --hostly-weight-semibold: 600;
  --hostly-leading-tight: 1.1;
  --hostly-leading: 1.4;
  --hostly-tracking-tight: -0.03em;
  --hostly-tracking-brand: 0.04em;
  --hostly-tracking-wide: 0.12em;

  /* ——— Forma ——— */
  --hostly-radius-sm: 8px;
  --hostly-radius-md: 10px;
  --hostly-radius-lg: 14px;
  --hostly-radius-pill: 999px;
  --hostly-btn-pad-y: 0.55rem;
  --hostly-btn-pad-x: 0.95rem;
  --hostly-logo-gap: 50px;

  /* Alias cortos */
  --ink: var(--hostly-primary);
  --paper: var(--hostly-background);
  --card: var(--hostly-surface);
  --line: var(--hostly-border);
  --mute: var(--hostly-muted);
  --accent: var(--hostly-secondary);
  --ok: var(--hostly-success);
}

/* ——— Botones (usar estas clases, no inventar otras) ——— */
.hostly-button {
  appearance: none;
  font-family: var(--hostly-font);
  font-size: var(--hostly-size-md);
  font-weight: var(--hostly-weight);
  line-height: var(--hostly-leading);
  border: 0;
  border-radius: var(--hostly-radius-sm);
  padding: var(--hostly-btn-pad-y) var(--hostly-btn-pad-x);
  cursor: pointer;
  background: var(--hostly-secondary);
  color: var(--hostly-on-secondary);
}

.hostly-button:hover {
  filter: brightness(1.06);
}

.hostly-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
}

.hostly-button:disabled:hover {
  filter: none;
}

.hostly-button--primary {
  background: var(--hostly-primary);
  color: var(--hostly-on-primary);
}

.hostly-button--ghost {
  background: transparent;
  color: var(--hostly-primary);
  border: 1px solid var(--hostly-border);
}

.hostly-fab {
  appearance: none;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: var(--hostly-radius-pill);
  background: var(--hostly-surface);
  color: var(--hostly-primary);
  font-family: var(--hostly-font);
  font-size: var(--hostly-size-lg);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 8px 24px var(--hostly-shadow);
}

.hostly-fab img,
.hostly-fab svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hostly-fab--wa {
  background: transparent;
  padding: 0;
}

.hostly-input {
  font-family: var(--hostly-font);
  font-size: var(--hostly-size-md);
  color: var(--hostly-primary);
  background: var(--hostly-surface);
  border: 1px solid var(--hostly-border);
  border-radius: var(--hostly-radius-sm);
  padding: 0.5rem 0.6rem;
}

.hostly-card {
  background: var(--hostly-surface);
  border: 1px solid var(--hostly-border);
  border-radius: var(--hostly-radius-md);
}