/* LM Imobiliária — direção B "Geometria do telhado".
   Só variáveis. O resto do site (site.css) usa apenas estes nomes. */

/* TeX Gyre Adventor: desenho da família Avant Garde, o mesmo da Century Gothic (licença GUST, livre) */
@font-face{font-family:"Adventor";src:url("fontes/adventor-regular.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Adventor";src:url("fontes/adventor-bold.otf") format("opentype");font-weight:600 800;font-display:swap}
@font-face{font-family:"Figtree";src:url("fontes/figtree.woff2") format("woff2");font-weight:300 800;font-display:swap}

:root{
  /* Marca (do logo) */
  --petroleo-900:#0E2A31;
  --petroleo-800:#12343C;   /* topo, blocos escuros */
  --petroleo-700:#17434D;   /* cor da marca: faixa do telhado e "LM" */
  --petroleo-600:#1F5562;
  --petroleo-300:#9FB6BC;   /* texto secundário sobre petróleo */
  --petroleo-100:#E3ECEE;
  --petroleo-50:#F1F5F6;
  --laranja:#EA5A24;        /* faixas do logo e realces grandes; nunca texto pequeno */
  --laranja-texto:#C44A1A;  /* botões com texto branco (contraste AA) */
  --laranja-escuro:#A63D14; /* hover dos botões */
  --laranja-claro:#F2834F;  /* destaque de texto sobre petróleo */
  --cinza-marca:#A3ABAE;    /* cumeeiras e linhas do logo */

  /* Neutros com viés petróleo */
  --n-0:#FFFFFF;
  --n-50:#F5F7F7;
  --n-100:#EBEFF0;
  --n-200:#DCE3E4;
  --n-400:#93A2A6;
  /* texto: o usuário não quer texto cinza no site, só preto (n-600 e n-800 só são usados como cor de texto) */
  --n-600:#1A1A1A;
  --n-800:#141414;
  --n-900:#12262C;

  --verde-whats:#1A8D4A;       /* botões do WhatsApp: verde do app, escuro o bastante para o texto branco */
  --verde-whats-escuro:#147A3E;
  --sucesso:#1F7A4D;
  --alerta:#B7791F;

  /* Papéis */
  --fundo:var(--n-0);
  --fundo-alt:var(--n-50);
  --texto:#111111;
  --texto-suave:#1A1A1A;
  --linha:var(--n-200);
  --foco:var(--laranja);

  /* Tipografia */
  --fonte-titulo:"Century Gothic","Adventor","Avenir Next",Arial,sans-serif;
  --fonte-texto:"Figtree","Segoe UI",Roboto,Arial,sans-serif;
  --fs-1:.8125rem;                                  /* 13 legendas */
  --fs-2:.9375rem;                                  /* 15 texto pequeno */
  --fs-3:1.0625rem;                                 /* 17 texto */
  /* Century Gothic é larga: a escala é mais contida que numa fonte estreita */
  --fs-4:clamp(1.1rem,1rem + .35vw,1.25rem);        /* títulos de card */
  --fs-5:clamp(1.4rem,1.15rem + 1vw,1.8rem);        /* h2 */
  --fs-6:clamp(1.75rem,1.3rem + 1.8vw,2.5rem);      /* h1 das páginas */
  --fs-7:clamp(2.1rem,1.4rem + 3vw,3.3rem);         /* título da home */

  /* Espaço (base 4px) */
  --esp-1:4px; --esp-2:8px; --esp-3:12px; --esp-4:16px; --esp-5:24px;
  --esp-6:32px; --esp-7:48px; --esp-8:64px; --esp-9:96px; --esp-10:128px;

  /* Forma */
  --raio-s:4px; --raio-m:6px; --raio-l:12px;
  --sombra-1:0 1px 2px rgba(18,38,44,.06),0 2px 8px rgba(18,38,44,.06);
  --sombra-2:0 10px 30px rgba(18,38,44,.14);
  --largura-conteudo:1180px;
  --largura-texto:66ch;

  /* Inclinação do telhado: todas as faixas do logo usam este ângulo */
  --angulo:-50deg;

  --duracao:180ms;
  --curva:cubic-bezier(.2,.7,.2,1);
}