/**
 * Zere — Design Tokens
 * Variáveis CSS globais: paleta, tipografia, raios, espaçamentos, sombras.
 * Tudo no site deve consumir estes tokens em vez de valores fixos.
 */

:root {
	/* ---------------------------------------------------------------
	 * 1. Paleta — cores de marca (nomes literais, não semânticos)
	 * ------------------------------------------------------------- */
	--zere-warm-mineral: #E4E4DB;
	--zere-sand: #D8CCBC;
	--zere-deep-olive: #5E6B4D;
	--zere-graphite: #292826;
	--zere-bronze: #B08A5A;
	--zere-travertino: #CB879E;
	/* Vermelho da faixa de pré-inauguração — cor extraída do mockup do
	   cliente (Hero copy 11set), não faz parte da paleta original */
	--zere-red: #7E0003;

	/* Variações derivadas (hover, estados, sobreposições) */
	--zere-deep-olive-dark: color-mix(in srgb, var(--zere-deep-olive) 82%, black);
	--zere-deep-olive-light: color-mix(in srgb, var(--zere-deep-olive) 88%, white);
	--zere-bronze-dark: color-mix(in srgb, var(--zere-bronze) 82%, black);
	--zere-red-dark: color-mix(in srgb, var(--zere-red) 80%, black);
	--zere-red-light: color-mix(in srgb, var(--zere-red) 88%, white);
	--zere-graphite-soft: color-mix(in srgb, var(--zere-graphite) 70%, white);
	--zere-travertino-soft: color-mix(in srgb, var(--zere-travertino) 40%, white);

	/* ---------------------------------------------------------------
	 * 2. Cores semânticas — o que a UI de fato consome
	 * ------------------------------------------------------------- */
	--zere-color-bg: var(--zere-warm-mineral);
	--zere-color-bg-secondary: var(--zere-sand);
	--zere-color-surface: #FFFFFF;
	--zere-color-brand: var(--zere-deep-olive);
	--zere-color-brand-hover: var(--zere-deep-olive-dark);
	--zere-color-text: var(--zere-graphite);
	--zere-color-text-muted: var(--zere-graphite-soft);
	--zere-color-accent: var(--zere-bronze);
	--zere-color-accent-hover: var(--zere-bronze-dark);
	--zere-color-accent-soft: var(--zere-travertino);
	--zere-color-border: color-mix(in srgb, var(--zere-graphite) 12%, transparent);

	/* ---------------------------------------------------------------
	 * 3. Tipografia
	 * ------------------------------------------------------------- */
	/* Tipografia da marca (Manual da marca, p. 10–11):
	   títulos e logotipo = All Round Gothic (Book/Medium); texto = Poppins
	   (Light/Regular/Medium). A All Round Gothic é do Adobe Fonts e só
	   carrega com o kit configurado (ver TODO.md, "zere_adobe_kit_id");
	   enquanto isso a Quicksand (arredondada, geométrica) é o stand-in. */
	--zere-font-heading: 'all-round-gothic', 'All Round Gothic Local', 'Quicksand', 'Poppins', -apple-system, 'Segoe UI', sans-serif;
	--zere-font-body: 'Poppins', -apple-system, 'Segoe UI', sans-serif;

	--zere-weight-heading: 500;
	--zere-weight-body-light: 300;
	--zere-weight-body-regular: 400;
	--zere-weight-body-semibold: 600;

	--zere-line-height-heading: 1.2;
	--zere-line-height-body: 1.7;

	--zere-tracking-heading: 0;
	--zere-tracking-eyebrow: 0.14em;

	/* Escala fluida de tamanhos (clamp = responsivo sem media query) */
	--zere-text-xs: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
	--zere-text-sm: clamp(0.9rem, 0.88rem + 0.15vw, 1rem);
	--zere-text-base: clamp(1rem, 0.97rem + 0.2vw, 1.125rem);
	--zere-text-lg: clamp(1.15rem, 1.1rem + 0.3vw, 1.375rem);
	--zere-text-xl: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem);
	--zere-text-2xl: clamp(1.75rem, 1.5rem + 1vw, 2.4rem);
	--zere-text-3xl: clamp(2.1rem, 1.7rem + 1.6vw, 3.1rem);
	--zere-text-4xl: clamp(2.4rem, 1.8rem + 2.4vw, 4rem);

	/* ---------------------------------------------------------------
	 * 4. Formas — raios generosos e blobs orgânicos (sem retas duras)
	 * ------------------------------------------------------------- */
	--zere-radius-sm: 1rem;
	--zere-radius-md: 1.75rem;
	--zere-radius-lg: 2.75rem;
	--zere-radius-xl: 4rem;
	--zere-radius-full: 999px;

	/* Formas blob (border-radius com 8 valores) para elementos decorativos */
	--zere-blob-1: 63% 37% 54% 46% / 43% 45% 55% 57%;
	--zere-blob-2: 37% 63% 47% 53% / 57% 41% 59% 43%;
	--zere-blob-3: 51% 49% 62% 38% / 38% 55% 45% 62%;

	/* ---------------------------------------------------------------
	 * 5. Espaçamento, sombra, transição, layout
	 * ------------------------------------------------------------- */
	--zere-space-xs: 0.5rem;
	--zere-space-sm: 1rem;
	--zere-space-md: 1.75rem;
	--zere-space-lg: 3rem;
	--zere-space-xl: 5rem;
	--zere-space-2xl: 8rem;

	--zere-shadow-sm: 0 4px 16px color-mix(in srgb, var(--zere-graphite) 8%, transparent);
	--zere-shadow-md: 0 12px 32px color-mix(in srgb, var(--zere-graphite) 12%, transparent);
	--zere-shadow-lg: 0 24px 64px color-mix(in srgb, var(--zere-graphite) 16%, transparent);

	--zere-transition-fast: 0.2s ease;
	--zere-transition-base: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	--zere-transition-slow: 0.6s cubic-bezier(0.22, 1, 0.36, 1);

	--zere-container-width: 1280px;

	/* Espaçamento entre seções da home no mobile (≤ 640px): a onda (80px) ocupa
	   o fim da seção de cima; o conteúdo termina 11px acima dela (--pb = 80 + 11 = 91px; 1rem = 14,6px no mobile)
	   e o primeiro texto da seção seguinte começa logo abaixo (--pt). Soma ≈ 100px. */
	--zere-wave-h: 80px;
	--zere-sec-gap-onda: 11px; /* último conteúdo → topo da caixa da onda (a curva fica ~27px abaixo) */
	--zere-sec-pb-mobile: calc(var(--zere-wave-h) + var(--zere-sec-gap-onda)); /* onda colada DENTRO da seção */
	--zere-sec-pt-mobile: 8px;
	--zere-container-padding: clamp(1.25rem, 4vw, 3rem);

	/* ---------------------------------------------------------------
	 * 6. Header & Footer — tokens específicos de layout global
	 * ------------------------------------------------------------- */
	/* +8px em ambas (era 92/72) para caber um logo maior com folga */
	--zere-header-height: 100px;
	--zere-header-height-mobile: 78px;

	--zere-z-header: 1000;
	--zere-z-mobile-nav: 999;

	/* Tons pedidos explicitamente para navegação e rodapé (fora da paleta base) */
	--zere-menu-link-color: #4D4A46;
	--zere-footer-muted: #6B6864;
	--zere-footer-text: color-mix(in srgb, var(--zere-warm-mineral) 80%, transparent);
	--zere-footer-border: color-mix(in srgb, var(--zere-warm-mineral) 16%, transparent);

	/* Texto secundário sobre fundos escuros (ex: parágrafo de apoio do Manifesto) */
	--zere-text-muted-on-dark: #9D9A96;
}

/* -------------------------------------------------------------------
 * Tipografia da marca — regras globais
 * ----------------------------------------------------------------- */

/* All Round Gothic instalada na máquina (Adobe Fonts ativada no
   computador): só funciona para quem a tem ativa. Para todos os visitantes
   é preciso o kit do Adobe Fonts (ver TODO.md). */
@font-face {
	font-family: 'All Round Gothic Local';
	font-weight: 400;
	src: local('AllRoundGothic-Book'), local('All Round Gothic Book'), local('AllRoundGothic Book');
}

@font-face {
	font-family: 'All Round Gothic Local';
	font-weight: 500;
	src: local('AllRoundGothic-Medium'), local('All Round Gothic Medium'), local('AllRoundGothic Medium');
}

/* O manual não prevê itálico: nenhuma das duas fontes é usada em itálico.
   O destaque (<em>) fica só na cor. */
body,
body * {
	font-style: normal !important;
}