/* ============================================================
   Pertim — TEMA
   Fonte única de cor, tipografia e espaçamento.
   Nenhum valor de cor/tamanho solto fora daqui. Se você precisa
   de um valor novo, ele nasce nesta folha primeiro.
   ============================================================ */

:root {
  /* ---- Cor: superfícies e tinta ---- */
  --cor-fundo:        #F1F4F3;
  --cor-superficie:   #FFFFFF;
  --cor-superficie-2: #F7F9F8;
  --cor-linha:        #E2E7E5;
  --cor-linha-forte:  #CFD6D3;
  --cor-tinta:        #15201C;
  --cor-tinta-media:  #55635D;
  --cor-tinta-fraca:  #7C8983;

  /* ---- Cor: marca ---- */
  --cor-marca:        #0E9A6C;
  --cor-marca-escura: #0A6E4E;
  --cor-marca-fundo:  #E1F3EB;
  --cor-marca-tinta:  #FFFFFF;
  --cor-destaque:     #E8871E;

  /* ---- Cor: status do anúncio (o coração do sistema) ---- */
  --cor-ativo:        #0E9A6C;
  --cor-ativo-fundo:  #E1F3EB;
  --cor-ativo-tinta:  #0A6E4E;

  --cor-esfriou:      #E8871E;
  --cor-esfriou-fundo:#FCEEDA;
  --cor-esfriou-tinta:#95530A;

  --cor-inativo:      #99A5A0;
  --cor-inativo-fundo:#ECEFEE;
  --cor-inativo-tinta:#5E6B66;

  /* Vendido é o único selo sólido. Ele aparece sobre um card já apagado, e é
     ele que diz "vendeu" em vez de "morreu". Vermelho porque é a etiqueta que
     o grupo já manda como figurinha. A barra de frescor continua cinza — na
     escala de temperatura o anúncio vendido está frio, e é só o selo que grita. */
  --cor-vendido:      #55635D;
  --cor-vendido-fundo:#C22F22;
  --cor-vendido-tinta:#FFFFFF;

  /* ---- Cor: categorias ---- */
  --cor-troca:        #7C4DEC;
  --cor-troca-fundo:  #EEE7FD;
  --cor-troca-tinta:  #55299F;

  --cor-lojinha:      #0E7C90;
  --cor-lojinha-fundo:#DCF0F4;
  --cor-lojinha-tinta:#0A5566;

  --cor-imovel:       #1D5FA8;
  --cor-imovel-fundo: #DDE9F7;
  --cor-imovel-tinta: #14406F;

  --cor-aviso:        #C2410C;
  --cor-aviso-fundo:  #FDE8DF;

  --cor-estrela:      #E8A020;
  --cor-whatsapp:     #128C4A;

  /* ---- Tipografia ---- */
  --fonte-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --fonte-texto:   "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* escala tipográfica — passo ~1.20 */
  --t-2xs:  0.6875rem;  /* 11px — selo, legenda */
  --t-xs:   0.75rem;    /* 12px */
  --t-sm:   0.8125rem;  /* 13px */
  --t-base: 0.9375rem;  /* 15px — corpo no celular */
  --t-md:   1.0625rem;  /* 17px */
  --t-lg:   1.25rem;    /* 20px */
  --t-xl:   1.5rem;     /* 24px */
  --t-2xl:  1.9375rem;  /* 31px */
  --t-3xl:  2.5rem;     /* 40px */

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-forte:  600;
  --peso-display: 700;

  --entrelinha-apertada: 1.15;
  --entrelinha-normal:   1.5;
  --letra-apertada: -0.02em;
  --letra-larga: 0.06em;

  /* ---- Espaçamento — base 4px ---- */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;

  /* ---- Forma ---- */
  --raio-sm: 8px;
  --raio-md: 14px;
  --raio-lg: 20px;
  --raio-pilula: 999px;

  --sombra-baixa: 0 1px 2px rgba(15, 35, 28, .05);
  --sombra-media: 0 1px 2px rgba(15, 35, 28, .05), 0 8px 24px rgba(15, 35, 28, .07);
  --sombra-alta:  0 12px 40px rgba(15, 35, 28, .16);

  /* ---- Layout ---- */
  --largura-max: 1200px;
  --altura-toque: 44px;   /* alvo mínimo de dedo */
  --altura-barra-inferior: 62px;

  /* ---- Movimento ---- */
  --transicao: 160ms cubic-bezier(.2, .7, .3, 1);
}

/* ============================================================
   Modo escuro — automático pelo sistema, ou forçado no botão.
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --cor-fundo:        #0F1613;
    --cor-superficie:   #17211D;
    --cor-superficie-2: #1D2823;
    --cor-linha:        #293630;
    --cor-linha-forte:  #3A4942;
    --cor-tinta:        #EAF0ED;
    --cor-tinta-media:  #A3B0AA;
    --cor-tinta-fraca:  #7F8D87;

    --cor-marca:        #2CC48D;
    --cor-marca-escura: #57D8A8;
    --cor-marca-fundo:  #123328;
    --cor-marca-tinta:  #06231A;
    --cor-destaque:     #F0A04B;

    --cor-ativo:        #2CC48D;
    --cor-ativo-fundo:  #123328;
    --cor-ativo-tinta:  #6FE0B4;

    --cor-esfriou:      #F0A04B;
    --cor-esfriou-fundo:#38260F;
    --cor-esfriou-tinta:#F7C489;

    --cor-inativo:      #6B7873;
    --cor-inativo-fundo:#212C27;
    --cor-inativo-tinta:#9CA9A3;

    --cor-vendido:      #8A9691;
    --cor-vendido-fundo:#C43A2D;
    --cor-vendido-tinta:#FFFFFF;

    --cor-troca:        #A78BFA;
    --cor-troca-fundo:  #241C3C;
    --cor-troca-tinta:  #C4B1FC;

    --cor-lojinha:      #38BCD4;
    --cor-lojinha-fundo:#0E2C33;
    --cor-lojinha-tinta:#7FD8E7;

    --cor-imovel:       #6BA8E8;
    --cor-imovel-fundo: #10263C;
    --cor-imovel-tinta: #A5CBF2;

    --cor-aviso:        #F08A5D;
    --cor-aviso-fundo:  #3A2016;

    --cor-estrela:      #F0B23C;
    --cor-whatsapp:     #34D177;

    --sombra-baixa: 0 1px 2px rgba(0, 0, 0, .3);
    --sombra-media: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --sombra-alta:  0 12px 40px rgba(0, 0, 0, .5);
  }
}

:root[data-tema="escuro"] {
  --cor-fundo:        #0F1613;
  --cor-superficie:   #17211D;
  --cor-superficie-2: #1D2823;
  --cor-linha:        #293630;
  --cor-linha-forte:  #3A4942;
  --cor-tinta:        #EAF0ED;
  --cor-tinta-media:  #A3B0AA;
  --cor-tinta-fraca:  #7F8D87;

  --cor-marca:        #2CC48D;
  --cor-marca-escura: #57D8A8;
  --cor-marca-fundo:  #123328;
  --cor-marca-tinta:  #06231A;
  --cor-destaque:     #F0A04B;

  --cor-ativo:        #2CC48D;
  --cor-ativo-fundo:  #123328;
  --cor-ativo-tinta:  #6FE0B4;

  --cor-esfriou:      #F0A04B;
  --cor-esfriou-fundo:#38260F;
  --cor-esfriou-tinta:#F7C489;

  --cor-inativo:      #6B7873;
  --cor-inativo-fundo:#212C27;
  --cor-inativo-tinta:#9CA9A3;

  --cor-vendido:      #8A9691;
  --cor-vendido-fundo:#C43A2D;
  --cor-vendido-tinta:#FFFFFF;

  --cor-troca:        #A78BFA;
  --cor-troca-fundo:  #241C3C;
  --cor-troca-tinta:  #C4B1FC;

  --cor-lojinha:      #38BCD4;
  --cor-lojinha-fundo:#0E2C33;
  --cor-lojinha-tinta:#7FD8E7;

  --cor-imovel:       #6BA8E8;
  --cor-imovel-fundo: #10263C;
  --cor-imovel-tinta: #A5CBF2;

  --cor-aviso:        #F08A5D;
  --cor-aviso-fundo:  #3A2016;

  --cor-estrela:      #F0B23C;
  --cor-whatsapp:     #34D177;

  --sombra-baixa: 0 1px 2px rgba(0, 0, 0, .3);
  --sombra-media: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  --sombra-alta:  0 12px 40px rgba(0, 0, 0, .5);
}

/* Tela grande: o corpo respira um ponto a mais. */
@media (min-width: 900px) {
  :root { --t-base: 1rem; }
}