/* Infinita Trip — UI kit primitives. Buttons are pills, icons are bare. */
@import url("../../colors_and_type.css");

* { box-sizing: border-box; }
body { margin: 0; }

/* ---------- Buttons — fully rounded, no outline variant ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm);
  padding: 12px 22px; border-radius: var(--radius-pill);
  border: 0; cursor: pointer; line-height: 1; white-space: nowrap;
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-base);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--yellow-300); box-shadow: var(--shadow-yellow); }
.btn-primary:active { background: var(--accent-press); }

/* "Dark" — earth-on-yellow tint, like "Resgatar" reference */
.btn-dark { background: var(--earth-900); color: var(--accent); }
.btn-dark:hover { background: var(--earth-800); }

/* Ghost — no border, just hover fill */
.btn-ghost { background: transparent; color: var(--fg-1); }
.btn-ghost:hover { background: var(--canvas-100); }

/* Yellow-soft — subdued yellow for secondary CTAs */
.btn-soft { background: var(--yellow-100); color: var(--earth-900); }
.btn-soft:hover { background: var(--yellow-200); }

.btn-sm { padding: 8px 16px; font-size: var(--fs-xs); }
.btn-lg { padding: 16px 28px; font-size: var(--fs-md); }
.btn .lucide { width: 16px; height: 16px; stroke-width: 1.75; }

/* Icon-only button — circular, no box outline */
.btn-icon {
  width: 40px; height: 40px; padding: 0; justify-content: center;
  border-radius: 50%; background: var(--earth-900); color: var(--accent);
}
.btn-icon:hover { background: var(--earth-800); }
.btn-icon.btn-icon-yellow { background: var(--accent); color: var(--earth-900); }
.btn-icon.btn-icon-yellow:hover { background: var(--yellow-300); }

/* ---------- Inputs — pill search, soft fields ---------- */
.input, .select, .textarea {
  font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--fg-1);
  background: var(--bg-inset);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 12px 18px; width: 100%;
  transition: background var(--dur-base), box-shadow var(--dur-base);
}
.input::placeholder { color: var(--fg-4); }
.input:focus { outline: none; box-shadow: 0 0 0 3px var(--yellow-200); background: var(--bg-paper); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: var(--fs-xs); font-weight: 500; color: var(--fg-2); padding-left: 8px; }

/* ---------- Cards ---------- */
.card {
  background: var(--bg-paper);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.card-yellow {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.card-dark {
  background: var(--earth-900);
  color: var(--canvas-50);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

/* ---------- Chips / pills ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 500;
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: var(--bg-inset); color: var(--fg-1);
}
.chip-yellow { background: var(--accent); color: var(--earth-900); }
.chip-dark   { background: var(--earth-900); color: var(--canvas-50); }
.chip-soft   { background: var(--yellow-100); color: var(--earth-900); }

/* ---------- Layout primitives ---------- */
.row { display: flex; align-items: center; gap: var(--space-4); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.spacer { flex: 1; }