/* ============================================================
   MOBILIADOS — theme.css
   Fonte única de tokens do design system (Fase 1).
   Carregado globalmente via functions.php (mobiliados_enqueue_assets).
   NÃO redefinir :root nos templates — todos os tokens vivem aqui.
   ============================================================ */

:root{
  /* ===== MARCA ===== */
  --orange:#F47C20;        /* CTA primário, destaques de marca */
  --orange-dark:#D96A14;   /* hover do CTA primário */
  --orange-deep:#B25410;   /* gradientes / sombras laranja */
  --yellow:#FFC72C;        /* realce sob título, badge destaque */
  --yellow-soft:#FFF8E6;   /* fundo de realce suave */
  --cream:#FFFAF5;         /* fundo creme de seção */
  --blue:#1B3A8C;          /* azul institucional */
  --blue-deep:#0F2460;     /* azul escuro / base de sombras */
  --green:#25D366;         /* CTA WhatsApp (cor única) */
  --green-dark:#1EBE5A;    /* hover do CTA WhatsApp */
  --green-soft:#16A34A;    /* ícones / detalhes verdes */
  --white:#FFFFFF;
  --accent:var(--blue);    /* compatibilidade com page-corretores */

  /* ===== NEUTROS / TEXTO ===== */
  --ink:#1A2340;           /* texto de corpo e títulos */
  --ink-2:#3D4F70;         /* texto secundário, navegação */
  --muted:#6B6F7A;         /* legendas, placeholders, notas */
  --line:#E6E8EE;          /* bordas e divisores */
  --bg:#FFFFFF;            /* fundo padrão */
  --bg-soft:#F7F8FC;       /* fundo de seção alternada */

  /* ===== SEMÂNTICOS (estados de imóvel / feedback) ===== */
  --success:#16A34A;  --success-bg:#DCFCE7;   /* imóvel disponível */
  --warning:#B45309;  --warning-bg:#FEF3C7;   /* imóvel reservado */
  --neutral:#64748B;  --neutral-bg:#F1F5F9;   /* imóvel alugado */
  --danger:#DC2626;   --danger-bg:#FEF2F2;    /* erro de formulário */

  /* ===== SOMBRAS (elevação) ===== */
  --shadow-sm:0 1px 2px rgba(15,36,96,.06), 0 1px 3px rgba(15,36,96,.04);
  --shadow-md:0 6px 18px rgba(15,36,96,.08), 0 2px 6px rgba(15,36,96,.05);
  --shadow-lg:0 18px 40px rgba(15,36,96,.12), 0 4px 10px rgba(15,36,96,.06);

  /* ===== RAIO ===== */
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:18px;
  --radius-pill:999px;

  /* ===== ESCALA DE ESPAÇO ===== */
  --sp-1:4px;  --sp-2:8px;   --sp-3:12px;  --sp-4:16px;
  --sp-6:24px; --sp-8:32px;  --sp-12:48px; --sp-16:64px; --sp-24:96px;

  /* ===== ESCALA DE TIPOGRAFIA ===== */
  --fs-xs:12px;  --fs-sm:14px;  --fs-base:16px; --fs-lg:18px;
  --fs-xl:22px;  --fs-2xl:28px; --fs-3xl:36px;  --fs-4xl:48px;

  /* ===== LAYOUT ===== */
  --container:1200px;
  --header-h:72px;
  --wp-admin-bar-h:0px;
}

/* ============================================================
   COMPONENTE — Botão WhatsApp (padrão reutilizável · Fase 2)
   Verde único para TODA ação de WhatsApp no site. Coerente com
   o botão flutuante. Usar .btn-whatsapp em botões novos.
   ============================================================ */
.btn-whatsapp{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 22px;
  border-radius:var(--radius-pill);
  font-family:inherit;font-weight:700;font-size:15px;line-height:1;
  color:#fff;border:none;text-decoration:none;white-space:nowrap;cursor:pointer;
  background:linear-gradient(135deg,var(--green) 0%,var(--green-dark) 56%,var(--green-soft) 100%);
  box-shadow:0 8px 22px rgba(37,211,102,.28);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-whatsapp:hover{
  filter:brightness(1.06);
  box-shadow:0 11px 28px rgba(37,211,102,.36);
  transform:translateY(-1px);
}
.btn-whatsapp:active{transform:translateY(0)}
.btn-whatsapp:focus-visible{outline:3px solid rgba(37,211,102,.45);outline-offset:3px}
.btn-whatsapp svg{width:20px;height:20px;flex:0 0 auto}
.btn-whatsapp.btn-lg{padding:16px 26px;font-size:16px}

/* ============================================================
   ACESSIBILIDADE — Fase 4
   ============================================================ */

/* Foco visível em qualquer elemento interativo.
   Só aparece na navegação por teclado — usuários de mouse não veem. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid rgba(244,124,32,.6);
  outline-offset:2px;
}

/* Respeita a opção "Reduzir movimento" do sistema operacional.
   Afeta SOMENTE quem ativou essa opção de acessibilidade — para
   todos os outros visitantes o site continua idêntico, com animações. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  /* conteúdo que "surge ao rolar" aparece imediatamente, sem animar */
  .reveal{opacity:1 !important; transform:none !important}
}