/* ═══════════════════════════════════════════════════════════════════════
   MIO SPA — Global CSS
   Regras compartilhadas entre todas as páginas (reservar, index, eventos,
   admin, etc). Mantenha aqui apenas o que é verdadeiramente universal.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tipografia de display — Wandery (headlines e heros) ───────────────── */
@font-face {
  font-family: 'Wandery';
  src: url('/font/Wandery-Regular.woff2') format('woff2'),
       url('/font/Wandery-Regular.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Tipografia editorial — Musette (ênfase em palavras, display) ──────
   IMPORTANTE: o desenho dessa família renderiza bem menor que o texto
   do redor. Sempre que aplicar `font-family: 'Musette'...`, use
   `font-size: 2em` (ou equivalente) para compensar.

   Histórico: `Musette-Script.woff/woff2` (versões antigas) renderizam
   inconsistente em alguns browsers (subset incompleto?). `Musette-Clube.woff`
   é a versão que funcionava no template do Clube Mio; declarada PRIMEIRO
   pra ser preferida. As outras ficam como fallback. */
@font-face {
  font-family: 'Musette';
  src: url('/font/Musette-Clube.woff') format('woff'),
       url('/font/Musette-Script.woff2') format('woff2'),
       url('/font/Musette-Script.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Paleta e tokens de design ─────────────────────────────────────────── */
:root{
  --cream:#FAF7F2;
  --cream2:#F2EDE4;
  --stone:#8B7355;
  --stone-light:#C4B49A;
  --stone-dark:#5C4A32;
  --ink:#2A2420;
  --muted:#9A8F85;
  --sage:#7A8C72;
  --sage-dark:#5C6E55;
}

/* ── Reset universal ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Base do body ──────────────────────────────────────────────────────── */
body{
  font-family:'Jost',sans-serif;
  background:var(--cream);
  color:var(--ink);
}

/* ── Títulos principais — Wandery em heros e headlines grandes ─────────── */
/* Conforme mio-diretrizes-arte.md §2: Wandery em h1/hero/sessão principal.
   Usa !important para atuar como design token e sobrescrever definições
   de Cormorant Garamond nas páginas. */
.hero-tagline,
.hero-title,
.landing-title,
.headline,
.section-title {
  font-family: 'Wandery', 'Cormorant Garamond', serif !important;
}

/* ── Fade-in global ao carregar qualquer página ────────────────────────── */
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body {
  animation: pageFadeIn 0.9s ease-out both;
}

/* Respeita preferência do usuário por menos movimento */
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   BOTÕES — sistema unificado
   ─────────────────────────────────────────────────────────────────────
   Esta é a fonte canônica de todos os botões do site. Documentado em
   `docs/design-tokens.md` seção "5. Componentes & Padrões de UI".

   Anatomia de uso:
       <button class="btn {variante de cor} {tamanho?} {modificador?}">

   Variantes de cor (escolha exatamente UMA):
     .btn-primary  ink     — ação principal do fluxo cliente
     .btn-stone    stone   — CTAs admin, salvar
     .btn-sage     sage    — hero, nav, ações de marca
     .btn-outline  borda   — secundária (cancelar, copiar, voltar)
     .btn-ghost    nu      — terciária, mínimo destaque

   Tamanhos (opcional, default = médio):
     .btn-sm     compacto, pra ações inline e tabelas admin
     .btn-lg     hero, CTAs de tela de boas-vindas

   Modificador:
     .btn-on-dark  inverte cor/borda de .btn-outline e .btn-ghost
                   pra funcionarem sobre fundos escuros

   Regras:
     1. Border-radius é SEMPRE 6px (raio único da marca). Não crie outras.
     2. Antes de adicionar variante nova aqui, pergunte: é mesmo nova ou
        é caso de modificador / size novo? Variantes inflacionam o sistema.
     3. NUNCA redefina `.btn` ou variantes inline em <style> de página
        individual; isso quebra o padrão central. Use overrides contextuais
        só pra ajustes posicionais (ex: `.landing .btn-outline` no escuro,
        que vira equivalente de `.btn-on-dark` automático dentro do hero).
     4. Para botão dentro de página dark (banner, modal escuro), prefira
        adicionar `.btn-on-dark` ao invés de criar selector contextual.

   Exemplos canônicos:
     <button class="btn btn-primary">Reservar</button>
     <a href="#" class="btn btn-sage btn-lg">Conhecer o Mio</a>
     <button class="btn btn-outline btn-sm">Cancelar</button>
     <a class="btn btn-outline btn-on-dark">Sobre nós</a>
   ═══════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border: none;
  border-radius: 6px;
  font-family: 'Jost', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Variantes de cor ──────────────────────────────────────────────── */
.btn-primary { background: var(--ink); color: var(--cream); }
.btn-primary:hover { background: var(--stone-dark); }

.btn-stone { background: var(--stone); color: #fff; }
.btn-stone:hover { background: var(--stone-dark); }

.btn-sage { background: var(--sage); color: #fff; }
.btn-sage:hover { background: var(--sage-dark); }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--stone-light);
}
.btn-outline:hover {
  border-color: var(--stone);
  background: var(--cream2);
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
}
.btn-ghost:hover {
  color: var(--ink);
  border-color: var(--cream2);
}

/* ── Tamanhos ──────────────────────────────────────────────────────── */
.btn-sm { padding: 8px 18px;  font-size: 0.78rem; letter-spacing: 0.1em; }
.btn-lg { padding: 16px 40px; font-size: 0.85rem; letter-spacing: 0.14em; }

/* ── Modificador: sobre fundo escuro ───────────────────────────────── */
.btn-outline.btn-on-dark {
  color: var(--cream);
  border-color: rgba(250, 247, 242, 0.5);
}
.btn-outline.btn-on-dark:hover {
  border-color: var(--cream);
  background: rgba(250, 247, 242, 0.1);
}
.btn-ghost.btn-on-dark { color: rgba(250, 247, 242, 0.7); }
.btn-ghost.btn-on-dark:hover {
  color: var(--cream);
  border-color: rgba(250, 247, 242, 0.18);
}