/**
 * _variables.css — Tokens do Design System FBB.
 *
 * Valores extraídos e confirmados em DESIGN.md (JSON REST API do Figma +
 * paleta oficial fechada pelo cliente). Nenhum valor aqui é estimado.
 */

:root {
	/* ---------------------------------------------------------------------
	 * Cores de marca (paleta oficial FBB, confirmada pelo cliente)
	 * ------------------------------------------------------------------ */
	--fbb-color-navy: #002378;
	--fbb-color-red: #C1121F;
	--fbb-color-yellow: #FFDA00;
	--fbb-color-green: #2A8836;
	--fbb-color-offwhite: #F2F2F2;
	--fbb-color-text: #6E6E6E;
	--fbb-color-white: #FFFFFF;
	--fbb-color-black: #000000;

	/* Nota de uso pontual (não é token de marca) — ver DESIGN.md Seção 1. */
	--fbb-color-petroleo: #004A61;

	/* ---------------------------------------------------------------------
	 * Cores de sistema (NÃO são cores de marca — uso exclusivo documentado)
	 * ------------------------------------------------------------------ */
	--fbb-color-whatsapp: #25D366;
	--fbb-color-uk-red: #C8102E;
	--fbb-color-uk-blue: #012169;
	--fbb-color-card-border: #D2C6C6;
	--fbb-color-gray-page-bg: #F5F5F5;

	/* ---------------------------------------------------------------------
	 * Tipografia
	 * ------------------------------------------------------------------ */
	--fbb-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
	--fbb-font-weight-regular: 400;
	--fbb-font-weight-medium: 500;
	--fbb-font-weight-bold: 700;
	--fbb-font-weight-extrabold: 800;

	/* ---------------------------------------------------------------------
	 * Espaçamento e grid
	 * ------------------------------------------------------------------ */
	/* Grid canônico: 1440px úteis + 60px de gutter em cada lado. */
	--fbb-content-max-width: 1440px;
	--fbb-container-max-width: 1560px;
	--fbb-content-narrow-width: 1200px;
	--fbb-container-padding-inline: 60px;
	--fbb-container-padding-tablet: 40px;
	--fbb-container-padding-mobile: 22px;

	/* ---------------------------------------------------------------------
	 * Escala responsiva compartilhada por todas as páginas
	 * ------------------------------------------------------------------ */
	--fbb-page-gutter: 60px;
	--fbb-section-min-height: 100svh;
	--fbb-section-space-block: clamp( 82px, 9svh, 132px );
	--fbb-section-space-large: clamp( 72px, 8vw, 96px );
	--fbb-section-space-medium: clamp( 56px, 6vw, 72px );
	--fbb-section-space-small: clamp( 44px, 5vw, 56px );
	--fbb-section-title-size: 48px;
	--fbb-section-title-small-size: 40px;
	--fbb-body-size: 16px;
	--fbb-grid-gap: 24px;
	--fbb-content-gap: clamp( 32px, 5vw, 72px );
	--fbb-button-padding-y: 18px;
	--fbb-button-padding-x: 30px;

	/* ---------------------------------------------------------------------
	 * Corner radius
	 * ------------------------------------------------------------------ */
	--fbb-radius-pill: 200px;
	--fbb-radius-input-pill: 40px;
	--fbb-radius-input-form: 8px;
	--fbb-radius-card: 8px;

	/* Bordas e elevação compartilhadas. */
	--fbb-border-subtle: #E4E7EC;
	--fbb-shadow-card: 0 10px 24px rgba( 0, 35, 120, .08 );
	--fbb-shadow-card-strong: 0 16px 38px rgba( 0, 35, 120, .12 );

	/* ---------------------------------------------------------------------
	 * Breakpoints (uso em JS/media queries via valor cru — CSS não lê
	 * var() dentro de @media, então estes ficam também documentados aqui
	 * como referência e usados literalmente nos arquivos de componente)
	 * ------------------------------------------------------------------ */
	--fbb-bp-mobile: 375px;
	--fbb-bp-mobile-lg: 767px;
	--fbb-bp-tablet: 1023px;
	--fbb-bp-desktop: 1439px;
	--fbb-bp-desktop-lg: 1920px;

	/* ---------------------------------------------------------------------
	 * Z-index (escala centralizada para evitar "guerra de z-index")
	 * ------------------------------------------------------------------ */
	--fbb-z-header: 1000;
	--fbb-z-mobile-nav: 999;
	--fbb-z-modal: 2000;
}

/* Notebook, incluindo 1366×768. */
@media ( max-width: 1439px ) {
	:root {
		--fbb-page-gutter: 40px;
		--fbb-section-space-block: clamp( 58px, 7svh, 82px );
		--fbb-section-title-size: 40px;
		--fbb-section-title-small-size: 34px;
		--fbb-body-size: 15px;
		--fbb-grid-gap: 18px;
		--fbb-button-padding-y: 15px;
		--fbb-button-padding-x: 24px;
	}
}

/* Notebook com pouca altura — caso clássico 1366×768. */
@media ( min-width: 1024px ) and ( max-height: 800px ) {
	:root {
		--fbb-section-space-block: clamp( 46px, 6svh, 64px );
		--fbb-section-title-size: 38px;
		--fbb-section-title-small-size: 32px;
		--fbb-body-size: 14px;
		--fbb-grid-gap: 16px;
	}
}

/* Tablet. */
@media ( max-width: 1023px ) {
	:root {
		--fbb-page-gutter: 40px;
		--fbb-section-space-block: 72px;
		--fbb-section-title-size: 36px;
		--fbb-section-title-small-size: 32px;
		--fbb-body-size: 15px;
		--fbb-grid-gap: 18px;
	}
}

/* Mobile. */
@media ( max-width: 767px ) {
	:root {
		--fbb-page-gutter: 22px;
		--fbb-section-space-block: 64px;
		--fbb-section-title-size: clamp( 28px, 8vw, 34px );
		--fbb-section-title-small-size: clamp( 26px, 7vw, 30px );
		--fbb-body-size: 15px;
		--fbb-grid-gap: 14px;
		--fbb-button-padding-y: 14px;
		--fbb-button-padding-x: 20px;
	}
}

/* Mobile compacto. */
@media ( max-width: 479px ) {
	:root {
		--fbb-page-gutter: 18px;
		--fbb-section-space-block: 52px;
		--fbb-body-size: 14px;
	}
}