/* =============================================================================
   base.css — Design Tokens, Reset e Tipografia
   Carol Recla · Corretora de Imóveis · Grande Vitória
   -----------------------------------------------------------------------------
   Este arquivo define o Design System do projeto. Nenhuma cor, fonte ou
   espaçamento deve ser escrito "solto" em outros arquivos — sempre referenciar
   as variáveis abaixo. Isso garante consistência visual e facilita qualquer
   ajuste futuro de marca em um único lugar.
============================================================================= */

:root {
  /* ---------- Paleta institucional ---------- */
  --color-petroleo: #10393D;      /* verde petróleo — cor principal */
  --color-petroleo-dark: #0B2529;
  --color-dourado: #D9B34A;       /* dourado — cor secundária */
  --color-dourado-dark: #B7913A;
  --color-branco: #FFFFFF;
  --color-cinza-claro: #F6F6F6;
  --color-cinza-escuro: #2E2E2E;
  --color-erro: #C0392B;

  /* ---------- Tipografia ---------- */
  --font-heading: 'Cormorant Garamond', 'Playfair Display', serif;
  --font-body: 'Inter', 'Manrope', sans-serif;

  --fs-h1: clamp(2.75rem, 5vw, 4.5rem);
  --fs-h2: clamp(2rem, 3.5vw, 3rem);
  --fs-h3: clamp(1.35rem, 2vw, 1.75rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;

  /* ---------- Espaçamento ---------- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* ---------- Header glass ----------
     Vidro translúcido com uma leve pigmentação do verde petróleo da marca.
     São duas camadas sobrepostas: uma base clara (garante que o texto
     petróleo continue legível sobre hero/fotos/seções escuras) e, por cima
     dela, um véu do próprio --color-petroleo (#10393D) que dá o tom verde
     quando o header passa por seções brancas. */
  --header-glass-base: rgba(255, 255, 255, 0.66);
  --header-glass-tint: rgba(16, 57, 61, 0.14);
  --header-glass-border: rgba(16, 57, 61, 0.10);

  /* ---------- Sombras (discretas, sem exagero) ---------- */
  --shadow-sm: 0 2px 10px rgba(16, 57, 61, 0.06);
  --shadow-md: 0 12px 40px rgba(16, 57, 61, 0.12);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.35);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 350ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.65;
  color: var(--color-cinza-escuro);
  background-color: var(--color-branco);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

/* Trava o scroll do body quando o menu mobile está aberto */
body.nav-open { overflow: hidden; }

/* Oculta visualmente mantendo acessível a leitores de tela e para SEO */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a { color: inherit; text-decoration: none; }

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

ul, ol { list-style: none; margin: 0; padding: 0; }

input, select, textarea, button { font: inherit; }

/* ---------- Tipografia ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 var(--space-sm);
  color: var(--color-petroleo);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--space-sm); }

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-dourado-dark);
}

.section-title {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
}

/* ---------- Foco acessível ---------- */
:focus-visible {
  outline: 2px solid var(--color-dourado);
  outline-offset: 3px;
}

/* ---------- Respeita preferência de movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}