/**
 * Design tokens da Âmbar Energia.
 * Documentação: DESIGN-SYSTEM.md (raiz do tema).
 *
 * Por que `body` e não `:root`: o Elementor declara as variáveis do Kit em
 * `.elementor-kit-{ID}` (classe do <body>). Declarando aqui no mesmo elemento,
 * os aliases leem o valor atual do Kit; o hex é só fallback.
 * As variáveis do Astra (--ast-global-color-N) ficam em :root e também resolvem.
 */
body {
	/* ---- Cores (Kit do Elementor) ---- */
	--ambar-color-primary: var(--e-global-color-primary, #f68b1f);      /* laranja */
	--ambar-color-secondary: var(--e-global-color-secondary, #4a565d);  /* cinza-ardósia */
	--ambar-color-text: var(--e-global-color-text, #4a565d);
	--ambar-color-accent: var(--e-global-color-accent, #91ccd8);        /* azul claro */
	--ambar-color-white: var(--e-global-color-91e0766, #ffffff);
	--ambar-color-blue-mid: var(--e-global-color-0c41d57, #629dad);
	--ambar-color-blue-deep: var(--e-global-color-61f2adf, #00496a);
	--ambar-color-gray-light: var(--e-global-color-867807d, #dbdfe3);

	/* Também existem no Astra (cores 4 e 2), que servem de fallback */
	--ambar-color-background: var(--e-global-color-bgf8f54, var(--ast-global-color-4, #f8f5f4));
	--ambar-color-heading: var(--e-global-color-hd1e181, var(--ast-global-color-2, #1e1810));

	/* ---- Tipografia: famílias ---- */
	--ambar-font-heading: 'Montserrat', sans-serif;
	--ambar-font-body: 'Source Sans Pro', sans-serif;
	--ambar-font-ui: 'Heebo', sans-serif; /* botões e menu */

	/* ---- Tipografia: pesos ---- */
	--ambar-weight-regular: 400;
	--ambar-weight-medium: 500;
	--ambar-weight-bold: 700;
	--ambar-weight-extrabold: 800;

	/* ---- Tipografia: tamanhos (desktop; espelham o Astra) ---- */
	--ambar-text-body: 17px;
	--ambar-text-h1: 48px;
	--ambar-text-h2: 35px;
	--ambar-text-h3: 32px;
	--ambar-text-h4: 24px;
	--ambar-text-h5: 20px;
	--ambar-text-h6: 17px;
	--ambar-text-button: 15px;
	--ambar-leading-body: 1.65;

	/* ---- Espaçamento (valores mais usados no Elementor; nome = px) ---- */
	--ambar-space-5: 5px;
	--ambar-space-10: 10px;
	--ambar-space-15: 15px;
	--ambar-space-20: 20px; /* espaço padrão entre widgets no Kit */
	--ambar-space-25: 25px;
	--ambar-space-32: 32px;
	--ambar-space-40: 40px;
	--ambar-space-50: 50px;
	--ambar-space-64: 64px;

	/* ---- Raios ---- */
	--ambar-radius-sm: 8px;   /* botões */
	--ambar-radius-md: 12px;  /* cards */
	--ambar-radius-pill: 80px;

	/* ---- Sombra ---- */
	--ambar-shadow-card: 5px 5px 10px -2px rgba(0, 0, 0, 0.03);

	/* ---- Layout ---- */
	--ambar-container: 1200px;
	/*
	 * Breakpoints (variáveis CSS não funcionam em @media; valores de referência):
	 * tablet <= 921px, mobile <= 544px (Astra).
	 */
}

/* Tamanhos responsivos: mesmos cortes do Astra */
@media (max-width: 921px) {
	body {
		--ambar-text-h1: 36px;
		--ambar-text-h2: 30px;
		--ambar-text-h3: 25px;
		--ambar-text-h4: 20px;
		--ambar-text-h5: 17px;
		--ambar-text-h6: 15px;
	}
}

@media (max-width: 544px) {
	body {
		--ambar-text-h1: 32px;
		--ambar-text-h2: 26px;
		--ambar-text-h3: 22px;
		--ambar-text-h4: 18px;
		--ambar-text-h5: 15px;
		--ambar-text-h6: 13px;
		--ambar-text-button: 14px;
	}
}