/* Monitor Imobiliário — Portal · tokens
   Única fonte de valores. Componentes (styles.css) só consomem var(--*).
   Breakpoints (não podem ser custom properties em @media): 1280 · 1024 · 768 · 420 */

@font-face { font-family: "Inria Serif"; font-weight: 300; font-style: normal; font-display: swap; src: local("Inria Serif Light"), url("assets/fonts/InriaSerif-Light.woff2") format("woff2"); }
@font-face { font-family: "Inria Serif"; font-weight: 400; font-style: normal; font-display: swap; src: local("Inria Serif"), url("assets/fonts/InriaSerif-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inria Serif"; font-weight: 700; font-style: normal; font-display: swap; src: local("Inria Serif Bold"), url("assets/fonts/InriaSerif-Bold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 300; font-style: normal; font-display: swap; src: local("IBM Plex Sans Light"), url("assets/fonts/IBMPlexSans-Light.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: local("IBM Plex Sans"), url("assets/fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: local("IBM Plex Sans Medium"), url("assets/fonts/IBMPlexSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: local("IBM Plex Sans SemiBold"), url("assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }

:root {
  /* ---------- cor · marca ---------- */
  --cor-navy-950: #00081F;
  --cor-navy-900: #000E35;
  --cor-navy-800: #0D2A5C;
  --cor-azul-700: #144283;
  --cor-azul-600: #1858AC;
  --cor-azul-500: #2072D6;
  --cor-azul-400: #3D9BEC;
  --cor-azul-300: #6FC8FE;
  --cor-azul-200: #B0D6FB;
  --cor-azul-100: #D8EAFD;
  --cor-azul-50:  #EFF6FE;
  --cor-ciano:        #00C2FF;
  --cor-ciano-texto:  #00719A;

  /* ---------- cor · portal ---------- */
  --cor-fundo:          #FBFBFD;
  --cor-fundo-alt:      #F8FAFC;
  --cor-fundo-sutil:    #F1F4F9;
  --cor-cartao:         #FFFFFF;
  --cor-borda:          #E4E9F1;
  --cor-borda-forte:    #CBD3E0;
  --cor-hairline:       #EEF1F6;
  --cor-acao:           #0071E3;
  --cor-acao-hover:     #0077ED;
  --cor-acao-active:    #006EDB;
  --cor-acao-suave:     #EAF2FD;
  --cor-acao-suave-borda: #D8EAFD;
  --cor-texto:          #1D1D1F;
  --cor-texto-corpo:    #2E3542;
  --cor-texto-apoio:    #6E6E73;
  --cor-texto-meta:     #747479;
  --cor-texto-fraco:    #86868B;
  --cor-texto-placeholder: #A8B3C4;
  --cor-kicker:         #00719A;
  --cor-queda:          #B3261E;
  --cor-queda-suave:    rgba(179, 38, 30, .09);
  --cor-alta-suave:     rgba(0, 113, 227, .09);
  --cor-branco:         #FFFFFF;
  --cor-overlay:        rgba(0, 8, 31, .5);
  --cor-header-vidro:   rgba(251, 251, 253, .82);
  --cor-serie-2:        #0D2A5C;
  --cor-serie-3:        #B3261E;
  --cor-borda-escura:   rgba(111, 200, 254, .22);

  /* ---------- gradientes / sombras ---------- */
  --grad-display: linear-gradient(180deg, #1D1D1F 32%, #6E6E73 100%);
  --grad-halo: radial-gradient(closest-side, rgba(0, 113, 227, .16), rgba(0, 113, 227, 0));
  --grad-escuro: linear-gradient(160deg, #00081F 0%, #000E35 52%, #0D2A5C 100%);
  --grad-grade-escura: linear-gradient(rgba(111, 200, 254, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(111, 200, 254, .07) 1px, transparent 1px);
  --grad-capa: linear-gradient(135deg, #0D2A5C 0%, #1858AC 55%, #3D9BEC 100%);
  --sombra-cartao: 0 12px 28px rgba(13, 42, 92, .09);
  --sombra-flutuante: 0 30px 70px rgba(13, 42, 92, .14);
  --sombra-menu: 0 24px 60px rgba(13, 42, 92, .16);
  --sombra-seletor: 0 1px 2px rgba(0, 0, 0, .06);

  /* ---------- tipografia ---------- */
  --fonte-titulo: "Inria Serif", Georgia, "Times New Roman", serif;
  --fonte-texto: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --peso-leve: 300;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;
  --peso-titulo: 700;

  --fs-display: clamp(44px, 8vw, 96px);
  --fs-h1: clamp(30px, 4.2vw, 48px);
  --fs-h1-artigo: clamp(28px, 3.7vw, 44px);
  --fs-h2: clamp(23px, 2.6vw, 30px);
  --fs-h3: clamp(18px, 1.8vw, 21px);
  --fs-lead: clamp(16px, 1.8vw, 20px);
  --fs-corpo-artigo: clamp(17px, 1.8vw, 19px);
  --fs-corpo: 16px;
  --fs-ui: 14px;
  --fs-nav: 13px;
  --fs-meta: 12px;
  --fs-kicker: 10.5px;
  --fs-micro: 9.5px;
  --fs-numero: clamp(40px, 6vw, 72px);

  --lh-display: .94;
  --lh-titulo: 1.12;
  --lh-ui: 1.4;
  --lh-texto: 1.55;
  --lh-artigo: 1.75;

  --tr-display: -.04em;
  --tr-titulo: -.025em;
  --tr-texto: -.01em;
  --tr-kicker: .16em;
  --tr-micro: .2em;

  /* ---------- espaço ---------- */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 20px;
  --esp-6: 24px;
  --esp-7: 32px;
  --esp-8: 40px;
  --esp-9: 56px;
  --esp-10: 80px;
  --esp-gutter: clamp(16px, 4vw, 28px);
  --esp-secao: clamp(40px, 6vw, 72px);
  --esp-cartao: clamp(16px, 2.2vw, 24px);

  /* ---------- layout ---------- */
  --largura-max: 1160px;
  --largura-texto: 68ch;
  --altura-header: 58px;
  --altura-toque: 44px;
  --logo-altura: 32px;

  --borda: 1px;
  --borda-marca: 2px;
  --icone: 18px;
  --icone-sm: 14px;
  --avatar: 40px;
  --avatar-lg: clamp(72px, 10vw, 104px);
  --dot: 7px;
  --thumb-lista: clamp(88px, 16vw, 132px);
  --altura-grafico: clamp(200px, 30vw, 340px);
  --altura-grafico-sm: clamp(130px, 18vw, 180px);

  --anuncio-padrao: 100px;
  --anuncio-retangulo: 250px;
  --anuncio-super: clamp(100px, 13vw, 160px);
  --gap-grade: clamp(14px, 1.8vw, 20px);
  --gap-nav: clamp(14px, 2.2vw, 26px);
  --hero-topo: clamp(34px, 7vw, 96px);
  --largura-megamenu: 280px;
  --largura-menu-mobile: min(360px, 88vw);
  --largura-lateral: 300px;
  --largura-lateral-lg: 320px;
  --largura-sumario: 220px;
  --largura-signup: 520px;
  --largura-signup-sm: 420px;
  --patrocinio-largura: 120px;
  --patrocinio-altura: 40px;
  --col-cotacao: 96px;
  --mockup-desktop: 760px;
  --mockup-celular: 200px;
  --mockup-celular-lg: 240px;
  --grade-escura-tam: 46px;
  --halo-topo: -320px;
  --halo-largura: min(1100px, 150vw);
  --halo-altura: 600px;

  /* ---------- raios ---------- */
  --raio-xs: 4px;
  --raio-sm: 10px;
  --raio-md: 14px;
  --raio-lg: 18px;
  --raio-xl: 22px;
  --raio-2xl: 28px;
  --raio-pill: 980px;
  --raio-circulo: 50%;

  /* ---------- movimento ---------- */
  --dur-rapida: 150ms;
  --dur-media: 220ms;
  --curva: cubic-bezier(.22, .9, .2, 1);

  /* ---------- camadas ---------- */
  --z-header: 50;
  --z-menu: 60;
  --z-overlay: 70;
}

.tema-escuro {
  --cor-fundo: #000000;
  --cor-fundo-alt: #0A0B0E;
  --cor-fundo-sutil: #141519;
  --cor-cartao: #0A0B0E;
  --cor-borda: #26272C;
  --cor-hairline: #1D1E23;
  --cor-acao-suave: rgba(255, 255, 255, .06);
  --cor-acao-suave-borda: #3A3B40;
  --cor-texto: #F5F5F7;
  --cor-texto-corpo: #D2D2D7;
  --cor-texto-apoio: #A1A1A6;
  --cor-texto-meta: #8E8E93;
  --cor-kicker: #00C2FF;
  --cor-header-vidro: rgba(0, 0, 0, .72);
  --grad-display: linear-gradient(180deg, #FFFFFF 28%, #9AA4B4 100%);
}