/* ==========================================================================
   ARQUIVO: variaveis.css
   OBJETIVO: Centralizar todos os tokens de design do BioBio Imóvel.
   Paleta monocromática refinada (preto, branco e variações de cinza),
   espaçamentos padronizados, fontes nativas do sistema e efeitos suaves.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1. PALETA DE CORES (Monocromática Minimalista)
     ------------------------------------------------------------------------ */
  /* Branco e tons de fundo claros */
  --cor-fundo-pagina: #ffffff;
  --cor-fundo-cartao: #ffffff;
  --cor-fundo-suave: #f9fafb;       /* Cinza bem clarinho para alternar seções */
  --cor-fundo-destaque: #f3f4f6;    /* Cinza sutil para áreas de ênfase */
  --cor-fundo-hover: #e5e7eb;

  /* Preto e tons de contraste profundo */
  --cor-preto-puro: #000000;
  --cor-preto-suave: #111827;      /* Texto principal com alto contraste */
  --cor-preto-medio: #1f2937;      /* Fundos escuros / elementos secundários */

  /* Tons de Cinza para Textos */
  --cor-texto-principal: #111827;  /* Títulos e textos de grande leitura */
  --cor-texto-secundario: #4b5563; /* Descrições, parágrafos explicativos */
  --cor-texto-apoio: #6b7280;      /* Legendas, notas e rodapé */
  --cor-texto-inverso: #ffffff;    /* Texto sobre fundos pretos */

  /* Bordas sutis */
  --cor-borda-clara: #f3f4f6;
  --cor-borda-media: #e5e7eb;      /* Borda padrão de cartões e divisórias */
  --cor-borda-escura: #111827;     /* Borda com destaque preto */

  /* ------------------------------------------------------------------------
     2. TIPOGRAFIA (Fontes Nativas do Sistema - Sem requisições online)
     ------------------------------------------------------------------------ */
  --fonte-principal: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  
  /* Tamanhos de Fonte */
  --tam-fonte-micro: 0.75rem;    /* 12px */
  --tam-fonte-pequena: 0.875rem; /* 14px */
  --tam-fonte-padrao: 1rem;      /* 16px */
  --tam-fonte-media: 1.125rem;   /* 18px */
  --tam-fonte-subtitulo: 1.25rem;/* 20px */
  --tam-fonte-h3: 1.5rem;        /* 24px */
  --tam-fonte-h2: 2rem;          /* 32px */
  --tam-fonte-h1: 2.75rem;       /* 44px */

  /* Pesos de Fonte */
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-forte: 700;
  --peso-extra: 800;

  /* Altura de Linha (Espaçamento entre linhas) */
  --altura-linha-apertada: 1.15;
  --altura-linha-padrao: 1.5;
  --altura-linha-conforto: 1.65;

  /* ------------------------------------------------------------------------
     3. ESPAÇAMENTOS (Grid e Margens)
     ------------------------------------------------------------------------ */
  --espaco-2xs: 0.25rem; /* 4px */
  --espaco-xs: 0.5rem;   /* 8px */
  --espaco-sm: 0.75rem;  /* 12px */
  --espaco-md: 1rem;     /* 16px */
  --espaco-lg: 1.5rem;   /* 24px */
  --espaco-xl: 2rem;     /* 32px */
  --espaco-2xl: 3rem;    /* 48px */
  --espaco-3xl: 4.5rem;  /* 72px */

  /* Largura máxima do conteúdo */
  --largura-maxima: 1140px;

  /* ------------------------------------------------------------------------
     4. BORDAS ARREDONDADAS (Border Radius)
     ------------------------------------------------------------------------ */
  --raio-pequeno: 6px;
  --raio-medio: 10px;
  --raio-grande: 16px;
  --raio-redondo: 9999px;

  /* ------------------------------------------------------------------------
     5. SOMBRAS SUAVES E TRANSIÇÕES
     ------------------------------------------------------------------------ */
  --sombra-suave: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
  --sombra-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --sombra-destaque: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  
  --transicao-rapida: 0.2s ease;
  --transicao-suave: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}