/*
 * Tokens do design ImobiCore.
 * Fonte única: docs/DESIGN.md, registrado no site via novamira/save-design.
 * Todo par de cor foi medido em WCAG antes de entrar aqui.
 */

/* --- Manrope, self-hospedada. Nenhum link para Google Fonts. --- */

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/manrope-var-latin.woff2') format('woff2-variations');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/manrope-var-latin-ext.woff2') format('woff2-variations');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* ---- Cores da identidade ImobiCore ---- */

	--imob-bg: #FFFFFF;
	--imob-surface: #F9FAFB;
	--imob-sunken: #F3F4F6;
	--imob-outline: #E5E7EB;
	--imob-outline-strong: #9CA3AF;

	/*
	 * Azul de ação. É o primário da marca e passa contraste sem remendo:
	 * branco sobre ele mede 6,70:1.
	 */
	--imob-acao: #1D4ED8;
	--imob-acao-hover: #1E3A8A;
	--imob-azul-claro: #60A5FA;
	--imob-azul-palido: #DBEAFE;

	/* Superfície escura do topo. Branco sobre o navy mede 10,36:1. */
	--imob-navy: #1E3A8A;
	--imob-navy-fim: #0B1730;

	/*
	 * Tinta e apoio. O #6B7280 da identidade mede 4,41:1 sobre o poço afundado,
	 * abaixo do piso, então o texto secundário padrão é o #4B5563 da mesma
	 * família (6,90:1 no poço, 7,56:1 no branco). O #6B7280 fica para metadado
	 * e placeholder sobre branco ou surface.
	 */
	--imob-tinta: #1F2937;
	--imob-apoio: #4B5563;
	--imob-apoio-claro: #6B7280;

	/*
	 * Funcionais, declaradas como exceção porque a paleta da marca é só azul e
	 * estado precisa de outra cor. Nunca decorativas.
	 */
	--imob-verde: #15803D;
	--imob-verde-hover: #0F6B2E;
	--imob-verde-bg: #DCFCE7;
	--imob-verde-texto: #0B6B2E;
	--imob-alerta-bg: #FEE2E2;
	--imob-alerta-texto: #A02525;
	--imob-sun: #FBBF24;
	--imob-sun-texto: #4A2E02;

	/* ---- Tipografia: Manrope em todos os papéis ---- */
	--imob-fonte: 'Manrope', system-ui, sans-serif;

	--imob-hero: 3.5rem;
	--imob-hero-lh: 1.05;
	--imob-h1: 2.5rem;
	--imob-h1-lh: 1.1;
	--imob-h2: 2rem;
	--imob-h2-lh: 1.15;
	--imob-h3: 1.5rem;
	--imob-h3-lh: 1.25;
	--imob-h4: 1.1875rem;
	--imob-h4-lh: 1.35;
	--imob-body-lg: 1.25rem;
	--imob-body: 1.0625rem;
	--imob-body-lh: 1.6;
	--imob-small: 0.9375rem;
	--imob-caption: 0.8125rem;
	--imob-preco: 2.5rem;
	--imob-preco-lg: 3.5rem;

	/* ---- Espaçamento, base 4px ---- */
	--imob-space-xs: 4px;
	--imob-space-sm: 8px;
	--imob-space-12: 12px;
	--imob-space-md: 16px;
	--imob-space-24: 24px;
	--imob-space-lg: 32px;
	--imob-space-48: 48px;
	--imob-space-xl: 64px;
	--imob-space-96: 96px;

	/* ---- Raios. Escala mantida; o chanfro não substitui, convive. ---- */
	--imob-radius-sm: 8px;
	--imob-radius-md: 16px;
	--imob-radius-lg: 20px;
	--imob-radius-xl: 28px;
	--imob-radius-pill: 999px;

	/*
	 * ---- A assinatura: o chanfro ----
	 * A lateral de um hexágono regular sobe a 30 graus da horizontal. Este é o
	 * mesmo ângulo: 32px de altura por 55px de largura, porque tan(30) = 0,577
	 * e 32 / 0,577 = 55. Nunca ajustar um sem o outro, senão o ângulo deixa de
	 * ser o do hexágono e a assinatura perde a razão de existir.
	 */
	--imob-chanfro-y: 32px;
	--imob-chanfro-x: 55px;

	/*
	 * A faixa do topo é muito mais alta que um card, e o painel de busca sobe
	 * 32px sobre ela: com o chanfro padrão a assinatura ficaria escondida atrás
	 * do painel exatamente no herói. Aqui ele é proporcional à faixa, no mesmo
	 * ângulo: 64 / 0,577 = 111.
	 */
	--imob-chanfro-hero-y: 64px;
	--imob-chanfro-hero-x: 111px;

	/* ---- Elevação. Sombra tingida com a tinta, nunca preto puro. ---- */
	--imob-shadow-card: 0 8px 24px rgba(31, 41, 55, 0.07);
	--imob-shadow-card-hover: 0 14px 32px rgba(31, 41, 55, 0.11);
	--imob-shadow-acao: 0 12px 32px rgba(29, 78, 216, 0.18);
	--imob-shadow-panel: 0 24px 48px rgba(31, 41, 55, 0.14);

	/* ---- Layout ---- */
	--imob-container: 1280px;
	--imob-gutter: 24px;
	--imob-medida: 68ch;

	/*
	 * Medida dos blocos de texto centrados, absoluta e não em `ch`.
	 *
	 * `ch` resolve contra a fonte do próprio elemento, então dois blocos com
	 * medidas parecidas em ch saem com larguras bem diferentes em pixel: 62ch na
	 * abertura da seção dava 736px e 68ch no bloco da busca dava 601px, e
	 * empilhados eles não compartilhavam nenhuma borda. Para peças que se compõem
	 * na vertical o que importa é a borda coincidir, e isso pede número absoluto.
	 *
	 * 46rem, e não um valor novo, porque é a medida que `.imob-secao__cabecalho`
	 * já usa em todo o site. Escolher outro número alinharia estes dois blocos
	 * entre si e os desalinharia de todos os outros cabeçalhos de seção.
	 */
	--imob-medida-centro: 46rem;

	/*
	 * Altura TOTAL do cabeçalho fixo, padding incluído.
	 *
	 * Três coisas dependem dela: o deslocamento do corpo nas páginas sem imagem
	 * no topo, a parada do painel grudento da ficha e o `scroll-margin` das
	 * âncoras. Enquanto valia 76px, o cabeçalho media 92 no desktop e 96 no
	 * celular, porque o tema pai põe 16px de padding em cima e embaixo que este
	 * número não contava. As três medidas ficavam curtas: no celular, 32px de
	 * conteúdo passavam por baixo do cabeçalho.
	 *
	 * O padding do pai continua onde está, e quem se ajusta é o `min-height` do
	 * miolo, em imob-layout.css, com a subtração explícita. Assim a aparência não
	 * muda e o token passa a dizer a verdade.
	 */
	--imob-header-h: 92px;

	/*
	 * Quanto a busca sobe sobre o banner do herói. O valor é a soma do controle
	 * segmentado (48px), do respiro até a barra (12px) e de meia barra (42px):
	 * com ele a peça branca fica exatamente a cavalo na borda de baixo da foto.
	 * Mexer aqui muda de quanto ela monta; a conta do limite de 1040px de
	 * viewport está explicada em imob-layout.css, junto da regra.
	 */
	--imob-hero-monta: 102px;

	/*
	 * ---- Movimento ----
	 * Durações e curvas vindas dos presets de movimento da skill ui-ux-pro-max,
	 * traduzidas para CSS: power1.out e power2.out são estas duas cúbicas.
	 * Nada de biblioteca externa; transform e opacity só.
	 */
	--imob-ease-saida: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--imob-ease-suave: cubic-bezier(0.22, 0.61, 0.36, 1);
	--imob-revela-dur: 520ms;
	--imob-revela-passo: 90ms;

	/* ---- Movimento. Dial motion 0.3: transição de estado, sem scroll. ---- */
	--imob-transicao: 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
	--imob-transicao-rapida: 120ms ease-out;
}

@media (max-width: 900px) {
	:root {
		/* O chanfro acompanha a escala, mantendo os 30 graus: 24 / 0,577 = 42 */
		--imob-chanfro-y: 24px;
		--imob-chanfro-x: 42px;
		/* 40 / 0,577 = 69 */
		--imob-chanfro-hero-y: 40px;
		--imob-chanfro-hero-x: 69px;
	}
}

@media (max-width: 640px) {
	:root {
		--imob-hero: 2.25rem;
		--imob-h1: 1.875rem;
		--imob-h2: 1.5rem;
		--imob-preco: 1.875rem;
		--imob-preco-lg: 2.25rem;
		--imob-gutter: 20px;
		/* Também a altura total: 16 de padding + 64 de miolo + 16 de padding. */
		--imob-header-h: 96px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--imob-transicao: 1ms linear;
		--imob-transicao-rapida: 1ms linear;
	}
}