/**
 * LCQM shared components.
 *
 * Presentation primitives used by more than one surface. Extracted from
 * landing.css when the checkout page needed the same button language — the
 * alternative was duplicating it, which guarantees the two drift apart.
 *
 * Depends on tokens.css for every value; nothing here declares a raw colour.
 * Anything used by exactly one feature belongs in that feature's stylesheet,
 * not here.
 */

/* --- Buttons ------------------------------------------------------------- */
.lcqm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lcqm-space-2);
  padding: 11px 22px;
  border-radius: var(--lcqm-radius-md);
  font-size: var(--lcqm-text-md);
  font-weight: var(--lcqm-font-semibold);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--lcqm-duration) var(--lcqm-ease),
    border-color var(--lcqm-duration) var(--lcqm-ease),
    transform var(--lcqm-duration-fast) var(--lcqm-ease),
    color var(--lcqm-duration) var(--lcqm-ease);
}

.lcqm-btn:active {
  transform: translateY(1px);
}

.lcqm-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--lcqm-ring-width) var(--lcqm-focus-ring);
}

.lcqm-btn--primary {
  background: var(--lcqm-primary);
  color: var(--lcqm-text-on-primary);
  box-shadow: var(--lcqm-shadow-sm);
}

.lcqm-btn--primary:hover {
  background: var(--lcqm-primary-hover);
  color: var(--lcqm-text-on-primary);
}

.lcqm-btn--ghost {
  background: transparent;
  color: var(--lcqm-text-muted);
  border-color: var(--lcqm-border-strong);
}

.lcqm-btn--ghost:hover {
  color: var(--lcqm-text);
  border-color: var(--lcqm-text-subtle);
  background: var(--lcqm-surface-hover);
}

@media (max-width: 480px) {
  .lcqm-btn {
    width: 100%;
  }
}

/* --- Card ---------------------------------------------------------------- */
.lcqm-card {
  background: var(--lcqm-surface-raised);
  border: 1px solid var(--lcqm-border);
  border-radius: var(--lcqm-radius-lg);
  box-shadow: var(--lcqm-shadow-md);
}

/* --- Notices ------------------------------------------------------------- */
.lcqm-notice {
  padding: var(--lcqm-space-3) var(--lcqm-space-4);
  border-radius: var(--lcqm-radius-sm);
  border: 1px solid var(--lcqm-border);
  background: var(--lcqm-surface-hover);
  color: var(--lcqm-text-muted);
  font-size: var(--lcqm-text-sm);
}