/* ============================================================
   AUPHA PET SHOP — camada de identidade visual (skin v1)
   Carregada DEPOIS do CSS principal. Só ajusta aparência
   (cores de marca, fontes, botões). Não altera estrutura,
   layout ou funções. Pode ser removida sem quebrar o app.
   ============================================================ */

:root {
  --aupha-amarelo: #fecb1a;   /* fundo do logo */
  --aupha-amarelo-2: #ffd23d; /* topo do gradiente */
  --aupha-amarelo-f: #f5b301; /* base do gradiente / hover */
  --aupha-teal: #00a4a0;      /* teal do logo */
  --aupha-teal-esc: #063b39;  /* teal escuro / texto sobre amarelo */
}

/* ---- Tipografia amigável (arredondada), combinando com o logo ---- */
body,
button,
input,
select,
textarea {
  font-family: "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1, h2, h3,
.hero-copy h1,
.eyebrow,
.brand-name,
.logo-text {
  font-family: "Fredoka", "Nunito", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.01em;
}

/* ---- Assinatura AUPHA: botão principal amarelo com texto teal ----
   (o mesmo contraste do logo: teal sobre amarelo — alta leitura)  */
.primary-button,
.form-submit,
.orange-action {
  background: linear-gradient(135deg, var(--aupha-amarelo-2), var(--aupha-amarelo-f)) !important;
  color: var(--aupha-teal-esc) !important;
  border: 1px solid #ffffff55 !important;
  text-shadow: none !important;
  border-radius: 16px !important;
  font-weight: 800;
}
.primary-button:hover:not(:disabled),
.form-submit:hover:not(:disabled),
.orange-action:hover:not(:disabled) {
  background: linear-gradient(135deg, #ffdb5c, #ffbf14) !important;
  box-shadow: 0 16px 32px #f0a5003d !important;
}

/* ---- Cantos um pouco mais arredondados (mais “pet friendly”) ---- */
.secondary-button,
.ghost-button,
.chip,
button:not(.primary-button):not(.form-submit):not(.orange-action) {
  border-radius: 14px;
}

/* ---- Foco / seleção / barra de rolagem na cor da marca ---- */
:focus-visible {
  outline: 3px solid var(--aupha-teal) !important;
  outline-offset: 2px;
}
::selection {
  background: var(--aupha-amarelo);
  color: var(--aupha-teal-esc);
}
* {
  scrollbar-color: var(--aupha-teal) transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--aupha-teal);
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .primary-button, .form-submit, .orange-action { transition: none !important; }
}