/*
 * Remap de tokens HDS → tokens ATV.
 * Fonte de verdade: theme.json (WordPress gera --wp--preset--* e --wp--custom--* em :root).
 * Este é o ÚNICO sítio onde os nomes HDS (--color-bus, --color-focus-outline, …) são redefinidos.
 * Os @font-face vêm de theme.json (settings.typography.fontFamilies[].fontFace).
 * Ver docs/design-system.md.
 */

:root {
	/* ---- Marca (HDS "bus" = cor primária) ------------------------------- */
	/* Lima só em superfícies e decoração. Texto/ligações/contornos usam Lima texto (5,75:1 em branco). */
	--color-bus: var(--wp--preset--color--atv-green, #7abf42);
	--color-bus-dark: var(--wp--preset--color--atv-green-text, #3b731a);
	--color-bus-medium-light: var(--wp--preset--color--atv-green-tint, #d4eab8);
	--color-bus-light: var(--wp--preset--color--atv-green-light, #f3f9eb);

	/* HDS "coat-of-arms" = cor secundária / foco. Em ATV é o Navy. */
	--color-coat-of-arms: var(--wp--preset--color--atv-navy, #2c3e50);
	--color-coat-of-arms-dark: var(--wp--preset--color--atv-black, #0b1215);
	--color-coat-of-arms-medium-light: var(--wp--preset--color--atv-line, #ecf0f1);
	--color-coat-of-arms-light: var(--wp--preset--color--atv-fog, #fafafa);

	/* ---- Foco ------------------------------------------------------------ */
	/* Navy em fundos claros (≥ 4,89:1 inclusive sobre lima). Em fundos escuros troca-se para lima (ver .atv-on-dark). */
	--atv-focus-light: var(--wp--custom--focus--light, #2c3e50);
	--atv-focus-dark: var(--wp--custom--focus--dark, #7abf42);
	--atv-focus-width: var(--wp--custom--focus--width, 3px);
	--atv-focus-offset: var(--wp--custom--focus--offset, 2px);
	--color-focus-outline: var(--atv-focus-light);

	/* ---- Neutros (escala "black" HDS → neutros ATV) --------------------- */
	--color-black: var(--wp--preset--color--atv-black, #0b1215);
	--color-black-90: var(--wp--preset--color--atv-navy, #2c3e50);
	--color-black-80: var(--wp--preset--color--atv-slate, #34495e);
	--color-black-70: #46525e;
	--color-black-60: var(--wp--preset--color--atv-muted, #596673);
	--color-black-50: #74808a;
	--color-black-40: #97a0a7;
	--color-black-30: #b9c0c5;
	--color-black-20: #d5dadd;
	--color-black-10: var(--wp--preset--color--atv-line, #ecf0f1);
	--color-black-5: var(--wp--preset--color--atv-fog, #fafafa);
	--color-white: var(--wp--preset--color--atv-white, #ffffff);

	/* ---- Estados (HDS, verificados AA em branco) ------------------------- */
	--color-error: var(--wp--preset--color--atv-error, #b01038);
	--color-success: var(--wp--preset--color--atv-success, #007a64);
	--color-info: var(--wp--preset--color--atv-info, #0062b9);
	--color-alert: var(--wp--preset--color--atv-alert, #ffda07);

	/* ---- Tipografia ------------------------------------------------------ */
	--font-default: var(--wp--preset--font-family--open-sans, "Open Sans", sans-serif);
	--font-heading: var(--wp--preset--font-family--montserrat, Montserrat, sans-serif);

	--fontsize-heading-xxl: var(--wp--preset--font-size--display, 4rem);
	--fontsize-heading-xl: var(--wp--preset--font-size--h-1, 3rem);
	--fontsize-heading-xl-mobile: var(--wp--preset--font-size--h-1, 2.5rem);
	--fontsize-heading-l: var(--wp--preset--font-size--h-2, 2rem);
	--fontsize-heading-m: var(--wp--preset--font-size--h-3, 1.5rem);
	--fontsize-heading-s: var(--wp--preset--font-size--h-4, 1.25rem);
	--fontsize-heading-xs: var(--wp--preset--font-size--h-5, 1.125rem);
	--fontsize-heading-xxs: var(--wp--preset--font-size--h-6, 1rem);
	--fontsize-body-s: var(--wp--preset--font-size--small, 0.875rem);
	--fontsize-body-m: var(--wp--preset--font-size--body, 1rem);
	--fontsize-body-l: var(--wp--preset--font-size--body-l, 1.125rem);
	--fontsize-body-xl: var(--wp--preset--font-size--lead, 1.25rem);

	/* ---- Sombras --------------------------------------------------------- */
	--box-shadow-s: var(--wp--preset--shadow--s, 0 2px 10px 0 rgba(0, 0, 0, 0.07));
	--box-shadow-m: var(--wp--preset--shadow--m, 0 2px 10px 0 rgba(0, 0, 0, 0.1));
	--box-shadow-l: var(--wp--preset--shadow--l, 0 2px 20px 0 rgba(0, 0, 0, 0.2));

	/* ---- Atalhos ATV (consumidos pelos restantes CSS do tema) ----------- */
	--atv-green: var(--wp--preset--color--atv-green, #7abf42);
	--atv-green-hover: var(--wp--preset--color--atv-green-hover, #70ab41);
	--atv-green-text: var(--wp--preset--color--atv-green-text, #3b731a);
	--atv-green-ink: var(--wp--preset--color--atv-green-ink, #2f6613);
	--atv-green-light: var(--wp--preset--color--atv-green-light, #f3f9eb);
	--atv-green-tint: var(--wp--preset--color--atv-green-tint, #d4eab8);
	--atv-navy: var(--wp--preset--color--atv-navy, #2c3e50);
	--atv-scrim: var(--wp--preset--color--atv-black, #0b1215);
	--atv-radius-control: var(--wp--custom--radius--control, 4px);
	--atv-radius-s: var(--wp--custom--radius--s, 4px);
	--atv-radius-m: var(--wp--custom--radius--m, 8px);
	--atv-motion-fast: var(--wp--custom--motion--fast, 150ms);
	--atv-motion-base: var(--wp--custom--motion--base, 250ms);
	--atv-motion-ease: var(--wp--custom--motion--ease, ease);
	--atv-header-h: var(--wp--custom--header--height, 4.5rem);

	/* Ligações (hds-link lê --link-color / --link-visited-color) */
	--link-color: var(--atv-green-text);
	--link-visited-color: var(--atv-green-ink);
}

/* Contextos escuros: o anel de foco passa a lima (4,89:1 em navy, 8,4:1 em scrim). */
.atv-on-dark,
.atv-hero,
.atv-agenda,
.atv-tile,
.atv-news-hero--photo,
.atv-placeholder-hero,
.atv-header--overlay:not(.atv-header--scrolled):not(.is-open) {
	--color-focus-outline: var(--atv-focus-dark);
	--link-color: var(--color-white);
	--link-visited-color: var(--color-white);
}

/* ---- Botões HDS ------------------------------------------------------- */
.hds-button {
	--min-size: 48px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fontsize-body-m);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: var(--atv-radius-control);
	transition:
		background-color var(--atv-motion-fast) var(--atv-motion-ease),
		border-color var(--atv-motion-fast) var(--atv-motion-ease),
		color var(--atv-motion-fast) var(--atv-motion-ease);
}

.hds-button--small {
	--min-size: 44px;
}

/* Primário: lima + navy (4,89:1). Hover/active escurecem para Lima texto/escuro com branco (5,75 / 6,93:1). */
.hds-button--primary {
	--background-color: var(--atv-green);
	--background-color-hover: var(--atv-green-text);
	--background-color-focus: var(--atv-green);
	--background-color-active: var(--atv-green-ink);
	--background-color-disabled: var(--color-black-20);
	--border-color: var(--atv-green);
	--border-color-hover: var(--atv-green-text);
	--border-color-active: var(--atv-green-ink);
	--color: var(--atv-navy);
	--color-hover: var(--color-white);
	--color-focus: var(--atv-navy);
	--color-active: var(--color-white);
	--color-disabled: var(--atv-navy);
	--outline-color-focus: var(--color-focus-outline);
}

/* Secundário (outline): contorno e texto em Lima texto (5,75:1 texto, 5,75:1 não-texto). */
.hds-button--secondary {
	--background-color: transparent;
	--background-color-hover: var(--atv-green-light);
	--background-color-focus: transparent;
	--background-color-active: var(--atv-green-tint);
	--border-color: var(--atv-green-text);
	--border-color-disabled: var(--color-black-40);
	--color: var(--atv-green-text);
	--color-hover: var(--atv-green-ink);
	--color-active: var(--atv-green-ink);
	--color-disabled: var(--color-black-60);
	--outline-color-focus: var(--color-focus-outline);
}

.hds-button--supplementary {
	--background-color: transparent;
	--background-color-hover: var(--atv-green-light);
	--background-color-active: var(--atv-green-tint);
	--border-color: transparent;
	--color: var(--atv-green-text);
	--color-hover: var(--atv-green-ink);
	--color-disabled: var(--color-black-60);
	--outline-color-focus: var(--color-focus-outline);
}

/* Variante em fundo escuro (hero, agenda, scrim): lima sólido com navy, outline branco. */
.atv-on-dark .hds-button--secondary,
.hds-button--on-dark {
	--background-color: transparent;
	--background-color-hover: rgba(255, 255, 255, 0.12);
	--background-color-active: rgba(255, 255, 255, 0.2);
	--border-color: var(--color-white);
	--color: var(--color-white);
	--color-hover: var(--color-white);
	--color-active: var(--color-white);
}

.atv-on-dark .hds-button--supplementary {
	--color: var(--color-white);
	--color-hover: var(--color-white);
	--background-color-hover: rgba(255, 255, 255, 0.12);
}

.hds-button:focus-visible {
	outline: var(--atv-focus-width) solid var(--color-focus-outline);
	outline-offset: var(--atv-focus-offset);
}

/* ---- Ligações HDS ----------------------------------------------------- */
/* O vendor define --link-color (lima) no próprio .hds-link, o que ignora o valor do :root: repor aqui. */
.hds-link {
	--link-color: var(--atv-green-text);
	--link-visited-color: var(--atv-green-ink);
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
}

/* Contextos escuros: o .hds-link acima tem de voltar a branco. */
:is(
	.atv-on-dark,
	.atv-hero,
	.atv-agenda,
	.atv-tile,
	.atv-news-hero--photo,
	.atv-placeholder-hero,
	.atv-header--overlay:not(.atv-header--scrolled):not(.is-open)
) .hds-link {
	--link-color: var(--color-white);
	--link-visited-color: var(--color-white);
}

.hds-link:hover {
	color: var(--atv-green-ink);
	text-decoration-thickness: 2px;
}

.hds-link:focus-visible {
	outline: var(--atv-focus-width) solid var(--color-focus-outline);
	outline-offset: var(--atv-focus-offset);
	border-radius: 2px;
}

/* ---- Campos de formulário --------------------------------------------- */
.hds-text-input,
.hds-search-input {
	--input-border-color-default: var(--color-black-50);
	--input-border-color-hover: var(--atv-navy);
	--input-border-color-focus: var(--atv-navy);
	--label-color-default: var(--atv-navy);
	--helper-color-default: var(--color-black-60);
	--placeholder-color: var(--color-black-60);
	--input-background-default: var(--color-white);
}

.hds-text-input__input,
.hds-search-input__input {
	border-radius: var(--atv-radius-control);
	font-family: var(--font-default);
}

.hds-text-input__label,
.hds-search-input__label,
.hds-fieldset__legend {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fontsize-body-s);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--atv-navy);
}

.hds-checkbox,
.hds-radio-button {
	--background-selected: var(--atv-green-text);
	--background-hover: var(--atv-green-ink);
	--border-color-selected: var(--atv-green-text);
	--border-color-selected-hover: var(--atv-green-ink);
	--border-color-selected-focus: var(--atv-green-text);
	--border-color-unselected: var(--color-black-50);
	--border-color-unselected-hover: var(--atv-navy);
	--border-color-unselected-focus: var(--atv-navy);
	--icon-color-selected: var(--color-white);
	--label-color: var(--atv-navy);
	--focus-outline-color: var(--color-focus-outline);
}

.hds-radio-button {
	--icon-color-selected: var(--atv-green-text);
	--icon-color-hover: var(--atv-green-ink);
	--border-color-focus: var(--atv-navy);
}

/* ---- Tag / estado ------------------------------------------------------ */
.hds-tag {
	--background-color: var(--atv-green-light);
	--background-color-hover: var(--atv-green-tint);
	--background-color-focus: var(--atv-green-light);
	--color: var(--atv-green-text);
	--color-hover: var(--atv-green-ink);
	--color-focus: var(--atv-green-text);
	--border-color: transparent;
	--outline-color: var(--color-focus-outline);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fontsize-body-s);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: var(--atv-radius-s);
}

.hds-tag--neutral {
	--background-color: var(--color-black-10);
	--background-color-hover: var(--color-black-20);
	--color: var(--atv-navy);
	--color-hover: var(--atv-navy);
}

.hds-status-label {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fontsize-body-s);
	border-radius: var(--atv-radius-s);
}

/* ---- Notificações ------------------------------------------------------ */
.hds-notification {
	--notification-color: var(--atv-navy);
	border-radius: var(--atv-radius-s);
}

.hds-notification__label {
	font-family: var(--font-heading);
	font-weight: 700;
}

/* ---- Cartão ------------------------------------------------------------ */
.hds-card {
	--background-color: var(--color-white);
	--border-color: var(--color-black-20);
	--color: var(--atv-navy);
	border-radius: var(--atv-radius-m);
	overflow: hidden;
}

.hds-card__heading {
	font-family: var(--font-heading);
	font-weight: 700;
}

/* ---- Breadcrumb / paginação -------------------------------------------- */
/* HDS doesn't reset the <ol>: without this the browser's 40px indent and 1em margin push the crumb in and down. */
.hds-breadcrumb__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Inside a container the gutter already exists; the HDS side margin would indent the crumb twice. */
.hds-container .hds-breadcrumb {
	margin-inline: 0;
}

.hds-breadcrumb__link {
	color: var(--atv-green-text);
}

.hds-breadcrumb__link:hover {
	color: var(--atv-green-ink);
}

.hds-breadcrumb__item--current,
.hds-breadcrumb__item[aria-current] {
	color: var(--color-black-60);
}

.hds-pagination {
	--active-page-background-color: var(--atv-navy);
}

.hds-pagination__item-link {
	border-radius: var(--atv-radius-s);
	min-width: 44px;
	min-height: 44px;
}

.hds-pagination__item-link--active {
	color: var(--color-white);
}

.hds-pagination__item-link:focus-visible {
	outline: var(--atv-focus-width) solid var(--color-focus-outline);
	outline-offset: var(--atv-focus-offset);
}

/* ---- Highlight / cookie ------------------------------------------------ */
.hds-highlight {
	--accent-line-color: var(--atv-green);
	--text-color: var(--atv-navy);
}

.hds-cc {
	--focus-outline-color: var(--color-focus-outline);
}

/* ---- Base ---------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
.hds-button,
.atv-nav {
	font-family: var(--font-heading);
}

body {
	font-family: var(--font-default);
	color: var(--color-black-90);
	background: var(--color-white);
}