/* ================================================================
   SERENO – CSS CUSTOM PROPERTIES (DESIGN SYSTEM)
   Baseado na análise pixel-perfect do layout PDF aprovado.
   ================================================================ */

:root {

	/* ============================================================
	   CORES
	   ============================================================ */

	/* Navy primária – cor de fundo do header, formulário, footer e badges */
	--color-navy:          #1B2040;
	/* Variante mais escura para hover e estados ativos */
	--color-navy-dark:     #131729;
	/* Variante com opacidade – usada em overlays e campos de formulário */
	--color-navy-overlay:  rgba(27, 32, 64, 0.72);

	/* Branco puro – textos sobre fundo navy e fundo de seções claras */
	--color-white:         #FFFFFF;

	/* Verde WhatsApp – botão CTA secundário e botão flutuante */
	--color-green:         #25D366;
	--color-green-hover:   #1eba57;

	/* Textos em fundo claro */
	--color-text:          #2C2C2C;
	--color-text-light:    #595959;

	/* Overlay do Hero e Slider */
	--color-overlay-hero:  rgba(15, 18, 40, 0.60);
	--color-overlay-slide: rgba(15, 18, 40, 0.50);

	/* Linha / borda sutil sobre fundo navy */
	--color-border-light:  rgba(255, 255, 255, 0.30);

	/* ============================================================
	   TIPOGRAFIA
	   ============================================================ */

	/* Cormorant Garamond – Logo, títulos de seção, headings hero */
	--font-serif:          'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;

	/* Montserrat – Navegação, labels, botões, captions, body text */
	--font-sans:           'Montserrat', 'Arial', sans-serif;

	/* ============================================================
	   CONTAINER / LAYOUT
	   ============================================================ */

	/* Largura máxima – estimada a partir das proporções do PDF */
	--container-width:     1200px;
	--container-padding-x: 40px;

	/* ============================================================
	   HEADER
	   ============================================================ */
	--header-height:       70px;

	/* ============================================================
	   ESPAÇAMENTOS
	   Escala baseada nos ritmos verticais observados no PDF.
	   ============================================================ */
	--space-xs:   8px;
	--space-sm:   16px;
	--space-md:   32px;
	--space-lg:   64px;
	--space-xl:   96px;
	--space-2xl:  128px;

	/* ============================================================
	   BORDAS & ARREDONDAMENTOS
	   ============================================================ */
	--radius-sm:   4px;
	--radius-md:   8px;
	--radius-pill: 50px;   /* Badge do hero e botões */

	/* ============================================================
	   SOMBRAS
	   ============================================================ */
	--shadow-sm:   0 2px 10px rgba(0, 0, 0, 0.06);
	--shadow-md:   0 4px 24px rgba(0, 0, 0, 0.12);
	--shadow-wa:   0 4px 16px rgba(37, 211, 102, 0.40);

	/* ============================================================
	   TRANSIÇÕES
	   ============================================================ */
	--transition:     200ms ease;
	--transition-md:  380ms ease;

}