/* ==========================================================================
   Fora de Ângulo / foundation.css
   Tokens de design, reset mínimo e comportamento global.
   Cores, fontes e escalas vêm dos presets do theme.json (fonte única);
   aqui ganham nomes semânticos --fda-* usados por todo o CSS do tema.
   ========================================================================== */

:root {
	/* Cor */
	--fda-bg: var(--wp--preset--color--base, #f5f3ee);
	--fda-bg-soft: var(--wp--preset--color--base-soft, #ede8dc);
	--fda-text: var(--wp--preset--color--contrast, #080a0b);
	--fda-black: var(--wp--preset--color--contrast, #080a0b);
	--fda-muted: var(--wp--preset--color--muted, #666660);
	--fda-border: var(--wp--preset--color--border, #d6d1c4);
	--fda-rule: color-mix(in srgb, var(--fda-text) 72%, transparent);
	--fda-yellow: var(--wp--preset--color--accent, #ffc847);
	--fda-yellow-soft: var(--wp--preset--color--accent-soft, #f7f0d8);
	--fda-on-dark: var(--wp--preset--color--base, #f5f3ee);
	--fda-on-dark-muted: color-mix(in srgb, var(--fda-on-dark) 72%, transparent);

	/* Tipografia: famílias (arquivos locais entram via inc/fonts.php) */
	--fda-font-heading: var(--wp--preset--font-family--heading);
	--fda-font-body: var(--wp--preset--font-family--body);
	--fda-font-serif: var(--wp--preset--font-family--serif);
	--fda-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	/* Tipografia: escala (size / line-height) */
	--fda-size-label: 0.6875rem;      /* 11px  etiquetas, kicker */
	--fda-size-meta: 0.8125rem;       /* 13px  tempo, datas */
	--fda-size-small: 0.9375rem;      /* 15px  navegação, CTA */
	--fda-size-base: 1.0625rem;       /* 17px  excerpts, UI */
	--fda-size-reading: var(--wp--preset--font-size--reading, 1.1875rem); /* 19px corpo do artigo */
	--fda-size-lead: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
	--fda-size-card: clamp(1.25rem, 0.95rem + 0.7vw, 1.875rem);
	--fda-size-row: clamp(1.25rem, 0.9rem + 0.9vw, 2rem);
	--fda-size-section: clamp(1.5rem, 1.1rem + 1.25vw, 2.625rem);
	--fda-size-band: clamp(2rem, 1.2rem + 2.2vw, 3.5rem);
	--fda-size-feature: clamp(2.125rem, 1rem + 2.6vw, 4.125rem);
	--fda-size-display: clamp(2.375rem, 0.8rem + 3.57vw, 4.75rem);
	--fda-size-article: clamp(2.25rem, 1rem + 3vw, 3.75rem);

	--fda-leading-tight: 0.98;
	--fda-leading-heading: 1.06;
	--fda-leading-body: 1.55;
	--fda-leading-reading: 1.7;

	--fda-tracking-display: -0.032em;
	--fda-tracking-heading: -0.022em;
	--fda-tracking-label: 0.08em;
	--fda-tracking-wide: 0.32em;

	/* Espaço e grid */
	--fda-gutter: var(--wp--custom--gutter, clamp(1.25rem, 4.6vw, 5rem));
	--fda-wide: var(--wp--style--global--wide-size, 150rem);
	--fda-wide-reading: 90rem;   /* limite local: mídia larga dentro de artigos e páginas */
	--fda-measure: var(--wp--style--global--content-size, 44rem);
	--fda-gap: clamp(1.25rem, 2vw, 2.25rem);
	--fda-gap-l: clamp(2rem, 3.5vw, 4.5rem);
	--fda-space-section: clamp(3rem, 5.5vw, 6rem);
	--fda-space-block: clamp(2rem, 3.5vw, 3.5rem);
	--fda-space-stack: clamp(0.75rem, 1.2vw, 1rem);

	/* Detalhes */
	--fda-line: 1px;
	--fda-accent-bar: 2.25rem;
	--fda-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--fda-focus: 3px solid var(--fda-text);
	--fda-focus-offset: 3px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	overflow-x: clip;
	background: var(--fda-bg);
	color: var(--fda-text);
	font-family: var(--fda-font-body);
	font-kerning: normal;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video,
iframe {
	max-width: 100%;
}

img,
video {
	height: auto;
}

:where(h1, h2, h3, h4, h5, h6) {
	text-wrap: balance;
}

:where(p, li, figcaption) {
	text-wrap: pretty;
}

a {
	color: inherit;
	text-underline-offset: 0.18em;
}

/*
 * Foco: contorno preto sólido + halo amarelo. Funciona em fundo claro e
 * amarelo; no rodapé preto o contorno inverte (components.css).
 */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: var(--fda-focus);
	outline-offset: var(--fda-focus-offset);
	box-shadow: 0 0 0 calc(var(--fda-focus-offset) + 3px) var(--fda-yellow);
}

::selection {
	background: var(--fda-yellow);
	color: var(--fda-black);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}