/* ============================================================
   GPS IMOBILIÁRIO — base.css
   Variáveis, reset, tipografia, animações globais
   v0.9.0 · 2026-04-21 · nova paleta aprovada
   ============================================================ */

/* ─── VARIÁVEIS ─── */
:root {
  /* Texto */
  --ink: #142335;
  --ink-soft: #3D4E65;
  --ink-muted: #7D8BA0;

  /* Fundos neutros */
  --cream: #EEE9DF;
  --cream-dark: #E0DAC9;
  --cream-border: #C9C1B1;

  /* Base quentes (paleta aprovada) */
  --orange: #FFB162;
  --orange-dark: #823B28;
  --orange-bg: #FFF4E5;
  --terracotta: #A35139;
  --terracotta-light: #C47866;
  --terracotta-bg: #F5E3DC;

  /* Semantic aliases */
  --cta: var(--orange);           /* botões CTA + badges categorias especiais */
  --cta-dark: var(--orange-dark); /* hover/active do CTA */
  --warn: var(--orange);          /* avisos suaves (não-críticos) */
  --warn-bg: var(--orange-bg);
  --accent: var(--terracotta);    /* links, input focus, badges editoriais, alertas Inês */
  --accent-light: var(--terracotta-light);
  --accent-bg: var(--terracotta-bg);

  /* Estados funcionais (mantidos) */
  --green: #2D5016;
  --green-soft: #4CAF50;
  --green-bg: #F0FAF4;
  --green-light: #EBF2E4;
  --red-soft: #C0392B;
  --red-bg: #FDF0EE;
  --blue-soft: #1A3A5C;
  --blue-bg: #EDF2F7;

  /* Sombras + raios */
  --shadow-sm: 0 1px 3px rgba(20,35,53,0.08);
  --shadow-md: 0 4px 16px rgba(20,35,53,0.12);
  --shadow-lg: 0 8px 32px rgba(20,35,53,0.16);
  --r: 6px;
  --r-lg: 12px;

  /* Escala tipográfica */
  --font-xs:   10px; /* micro labels, pipeline steps */
  --font-sm:   12px; /* meta info, labels, badges */
  --font-base: 14px; /* corpo, botões default */
  --font-lg:   16px; /* subheadings */
  --font-xl:   20px; /* section titles */
  --font-2xl:  24px; /* page titles */
  --font-3xl:  32px; /* hero titles */

  /* Escala de espaçamento (disponível; migração gradual) */
  --space-2xs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
}

/* ─── RESET ─── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  font-family: 'DM Sans', sans-serif;
  background: var(--cream);
  color: var(--ink);
}

/* ─── ANIMAÇÕES GLOBAIS ─── */
.fade-in { animation: fadeIn .35s ease; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}