/* ============================================================
   Base — tipografia, body, defaults globais
   Carregar depois de tokens.css e reset.css.
   ============================================================ */

html,
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-ink);
  letter-spacing: var(--letter-spacing-tight);
}

body {
  background: var(--color-cream);
  overflow-x: hidden;
  /* Em telas grandes o cenário do app tem gradiente próprio.
     Aqui só garantimos um fundo neutro pra páginas sem palco. */
}

/* Em desktop, dá respiro creme acima/abaixo do card via padding NO BODY
   (não usar margin-block no .home — causa overflow lateral em algumas
   combinações de browser/scrollbar). Como `* { box-sizing: border-box }`
   já está aplicado no reset, esse padding entra dentro do min-height
   100vh do body sem aumentar a altura total nem disparar scrollbar. */
@media (min-width: 1024px) {
  body {
    padding-block: var(--space-6);  /* 32px de creme acima/abaixo do card */
  }
}

/* Notebook curto (Windows 125% scaling em 1080): reduz o respiro do
   body pra liberar 32px verticais e o conteúdo caber sem scroll. */
@media (min-width: 1024px) and (max-height: 800px) {
  body {
    padding-block: var(--space-4);  /* 16px */
  }
}

/* --- Headings ----------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-ink);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }

/* --- Texto comum ------------------------------------------- */

p {
  line-height: var(--line-height-base);
}

small {
  font-size: var(--font-size-sm);
  color: var(--color-ink-muted);
}

/* --- Botões base (CTA primário cor celeiro) ---------------- */
/* Componentes específicos podem sobrescrever, mas isso já dá uma
   linha decente pra qualquer <button class="btn-primary">. */

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 56px;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-family-base);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-pill);
  transition:
    transform var(--duration-instant) var(--ease-bounce),
    box-shadow var(--duration-fast) var(--ease-soft);
  will-change: transform;
}

.btn-primary {
  background: var(--color-barn);
  color: var(--color-white);
  box-shadow: var(--shadow-cta);
}

.btn-primary:active {
  transform: scale(0.96);
}

.btn-secondary {
  background: var(--color-white);
  color: var(--color-barn);
  box-shadow: var(--shadow-chip);
}

.btn-secondary:active {
  transform: scale(0.96);
}

/* --- Container central (pages) ----------------------------- */

.page {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* --- Cenário do app (palco) -------------------------------- */
/* Reaproveitado por home e por cada módulo. Cada módulo pode
   colorir variáveis pra "tropicalizar" o cenário. */

.stage {
  position: relative;
  min-height: 100svh;
  background: var(--gradient-sky-to-grass);
  overflow: hidden;
}

/* --- Fluent Emoji (default sizing global) ------------------ */
/* Imgs injetadas por fluentEmoji.parse() escalam pro tamanho
   da fonte do contexto (1em × 1em). Componentes podem
   sobrescrever via specificity (ex.: animal-token, top-bar). */
img.fluent-emoji,
img.emoji {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.12em;
}

/* --- Helpers visuais --------------------------------------- */

.is-faded {
  opacity: var(--opacity-faded);
  transition: opacity var(--duration-fast) var(--ease-soft);
}

.is-disabled {
  opacity: var(--opacity-disabled);
  filter: var(--filter-disabled);
  pointer-events: none;
}