/**
 * Base — tipografia, foco, motion, botões e utilitários leves.
 * Aditivo: não substitui estilos de página existentes.
 */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg-page);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
}

/* Hierarquia tipográfica (opt-in + headings semânticos leves) */
h1, .sc-title-lg {
  letter-spacing: var(--tracking-title-lg);
  line-height: var(--lh-tight);
  font-weight: 800;
}

h2, .sc-title-md {
  letter-spacing: var(--tracking-title-md);
  line-height: var(--lh-snug);
  font-weight: 750;
}

h3, h4, .sc-title-sm {
  letter-spacing: -0.01em;
  line-height: var(--lh-snug);
  font-weight: 700;
}

small, .sc-label, .sc-meta {
  letter-spacing: var(--tracking-label);
  line-height: var(--lh-snug);
}

.sc-muted {
  color: var(--muted);
}

.sc-readable {
  max-width: 65ch;
}

/* Foco acessível global (não remove outlines existentes com !important) */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--accent, #00a2ed);
  outline-offset: 2px;
}

:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus:not(:focus-visible) {
  outline: none;
}

/* Botões compartilhados — estados e resposta ao toque */
.btn {
  position: relative;
  min-height: var(--touch-min);
  border-radius: var(--radius-sm);
  transition:
    transform var(--transition-base) var(--ease-fluid),
    opacity var(--transition-fast) ease,
    box-shadow var(--transition-base) var(--ease-fluid),
    background-color var(--transition-fast) ease,
    filter var(--transition-fast) ease,
    border-color var(--transition-fast) ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.btn:focus-visible {
  outline: 2px solid var(--accent, #00a2ed);
  outline-offset: 2px;
}

.btn:hover:not(:disabled):not(.is-loading):not([aria-disabled="true"]) {
  filter: brightness(1.04);
}

.btn.is-pressed,
.btn:active:not(:disabled):not(.is-loading):not([aria-disabled="true"]) {
  transform: scale(0.97);
  filter: brightness(0.98);
}

.btn:disabled,
.btn.is-disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.btn.is-loading {
  cursor: wait;
  pointer-events: none;
  color: transparent !important;
}

.btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 1.1em;
  height: 1.1em;
  margin: -0.55em 0 0 -0.55em;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: currentColor;
  border-radius: 50%;
  color: #fff;
  animation: sc-spin var(--transition-slow) linear infinite;
}

.btn-ghost.is-loading::after,
.btn.is-loading.btn-ghost::after {
  border-color: rgba(22, 46, 61, 0.2);
  border-top-color: var(--header-dark, #162e3d);
  color: var(--header-dark, #162e3d);
}

.btn.is-success {
  background: var(--success) !important;
  color: #fff !important;
}

.btn.is-error {
  background: var(--danger) !important;
  color: #fff !important;
}

/* Press feedback em controles comuns (opt-in via data-sc-press ou classes) */
:where(
  .btn,
  .btn-primary,
  .btn-ghost,
  .btn-search,
  .public-bottom-nav__link,
  .negocios-sort-pill,
  .cards-carousel-arrow,
  [data-sc-press]
).is-pressed {
  transform: scale(0.97);
}

@keyframes sc-spin {
  to { transform: rotate(360deg); }
}

/* Preferência de movimento reduzido — obrigatório */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .btn.is-pressed,
  .btn:active:not(:disabled) {
    transform: none;
  }
}