/* Mesmo Teto — variáveis de aparência. Único lugar onde se define cor, tipografia,
   espaçamento e raio. As outras folhas só usam var(--...).

   Tema: segue o aparelho; <html data-tema="claro|escuro"> força um dos dois. */

:root {
  /* Tipografia: só fontes do aparelho, nada para baixar. */
  --fonte-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: var(--fonte-texto);
  --peso-titulo: 700;
  --letra-pp: 0.875rem;   /* 14 px: só rótulos e contagens */
  --letra-p: 1rem;        /* 16 px: texto corrido */
  --letra-m: 1.125rem;    /* 18 px */
  --letra-g: 1.375rem;    /* 22 px: preço no cartão, título de seção */
  --letra-gg: 1.75rem;    /* 28 px: preço no anúncio, frase do início */
  --letra-vitrine: 2.75rem; /* 44 px: frase do início no computador */
  --linha-texto: 1.5;
  --linha-titulo: 1.15;

  /* Espaçamento: múltiplos de 4 px. */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;

  /* Medidas fixas. */
  --toque: 2.75rem;         /* 44 px: menor alvo de toque */
  --largura-pagina: 70rem;  /* 1120 px */
  --borda: 1px;

  /* Raio. */
  --raio-p: 0.5rem;
  --raio-m: 0.75rem;
  --raio-g: 1.25rem;
  --raio-pilula: 999px;

  /* Cores, tema claro. */
  --cor-fundo: #ffffff;
  --cor-fundo-alt: #f1f5f2;
  --cor-superficie: #ffffff;
  --cor-texto: #12201a;
  --cor-texto-suave: #4a5a52;
  --cor-borda: #d3dcd6;
  --cor-primaria: #0a6847;
  --cor-sobre-primaria: #ffffff;
  --cor-primaria-suave: #e1f1e8;
  --cor-destaque: #f2b705;       /* amarelo-ipê: selos */
  --cor-sobre-destaque: #241a00;
  --cor-faixa: #0a6847;          /* faixa do topo do início */
  --cor-sobre-faixa: #ffffff;
  --cor-sobre-faixa-suave: #cfe8dc;
  --cor-whatsapp: #0b7a3e;
  --cor-sobre-whatsapp: #ffffff;
  --cor-favorito: #e5484d;
  --cor-alerta: #b3261e;
  --cor-foco: #1456d9;
  --cor-veu: rgb(0 0 0 / 0.55);  /* fundo dos botões sobre foto e atrás da folha */
  --cor-sobre-veu: #ffffff;
  --cor-palco: #000000;          /* fundo da galeria em tela cheia, nos dois temas */
  --cor-papel: #ffffff;          /* fundo do logotipo da imobiliária, nos dois temas */
  --sombra: 0 1px 2px rgb(18 32 26 / 0.08), 0 6px 20px rgb(18 32 26 / 0.10);
  --sombra-cima: 0 -2px 12px rgb(18 32 26 / 0.12);

  color-scheme: light;
}

/* Tema escuro: quando o aparelho pede e a página não força o claro... */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --cor-fundo: #0e1512;
    --cor-fundo-alt: #17201c;
    --cor-superficie: #1b2621;
    --cor-texto: #eef3f0;
    --cor-texto-suave: #a9b8b0;
    --cor-borda: #2e3d36;
    --cor-primaria: #4fd1a1;
    --cor-sobre-primaria: #06281b;
    --cor-primaria-suave: #17382c;
    --cor-destaque: #f2c230;
    --cor-sobre-destaque: #241a00;
    --cor-faixa: #12382b;
    --cor-sobre-faixa: #eef3f0;
    --cor-sobre-faixa-suave: #a9cdbd;
    --cor-whatsapp: #3ddc84;
    --cor-sobre-whatsapp: #04260f;
    --cor-favorito: #ff6b70;
    --cor-alerta: #ffb4ab;
    --cor-foco: #9cc2ff;
    --cor-veu: rgb(0 0 0 / 0.65);
    --sombra: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 20px rgb(0 0 0 / 0.35);
    --sombra-cima: 0 -2px 12px rgb(0 0 0 / 0.45);
    color-scheme: dark;
  }
}

/* ...ou quando a página força o escuro (mesmos valores do bloco acima). */
:root[data-tema="escuro"] {
  --cor-fundo: #0e1512;
  --cor-fundo-alt: #17201c;
  --cor-superficie: #1b2621;
  --cor-texto: #eef3f0;
  --cor-texto-suave: #a9b8b0;
  --cor-borda: #2e3d36;
  --cor-primaria: #4fd1a1;
  --cor-sobre-primaria: #06281b;
  --cor-primaria-suave: #17382c;
  --cor-destaque: #f2c230;
  --cor-sobre-destaque: #241a00;
  --cor-faixa: #12382b;
  --cor-sobre-faixa: #eef3f0;
  --cor-sobre-faixa-suave: #a9cdbd;
  --cor-whatsapp: #3ddc84;
  --cor-sobre-whatsapp: #04260f;
  --cor-favorito: #ff6b70;
  --cor-alerta: #ffb4ab;
  --cor-foco: #9cc2ff;
  --cor-veu: rgb(0 0 0 / 0.65);
  --sombra: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 20px rgb(0 0 0 / 0.35);
  --sombra-cima: 0 -2px 12px rgb(0 0 0 / 0.45);
  color-scheme: dark;
}