html[data-wl-brand] {
	--brand-color: var(--wl-brand-primary);
	--primary: var(--wl-brand-primary);
	--primary-color: var(--wl-brand-primary);
	--btn-primary: var(--wl-brand-primary);
	--border-primary: var(--wl-brand-primary);
	--checkbox-color: var(--wl-brand-primary);
	--checkbox-gradient: var(--wl-brand-primary);
}

html[data-wl-brand] body {
	font-family: var(--wl-body-family), var(--font-stack);
}

html[data-wl-brand] h1,
html[data-wl-brand] h2,
html[data-wl-brand] h3,
html[data-wl-brand] h4,
html[data-wl-brand] h5,
html[data-wl-brand] h6 {
	font-family: var(--wl-heading-family), var(--font-stack);
}

html[data-wl-brand][data-theme="light"] {
	--bg-color: var(--wl-light-canvas);
	--fg-color: var(--wl-light-surface);
	--card-bg: var(--wl-light-surface);
	--navbar-bg: var(--wl-light-surface);
	--modal-bg: var(--wl-light-surface);
	--popover-bg: var(--wl-light-surface);
	--text-color: var(--wl-light-text);
	--heading-color: var(--wl-light-text);
	--text-muted: var(--wl-light-muted);
	--border-color: var(--wl-light-border);
	--dark-border-color: var(--wl-light-border);
}

html[data-wl-brand][data-theme="dark"] {
	--bg-color: var(--wl-dark-canvas);
	--fg-color: var(--wl-dark-surface);
	--card-bg: var(--wl-dark-surface);
	--navbar-bg: var(--wl-dark-surface);
	--modal-bg: var(--wl-dark-surface);
	--popover-bg: var(--wl-dark-surface);
	--text-color: var(--wl-dark-text);
	--heading-color: var(--wl-dark-text);
	--text-muted: var(--wl-dark-muted);
	--border-color: var(--wl-dark-border);
	--dark-border-color: var(--wl-dark-border);
}

html[data-wl-brand] .btn-primary {
	background-color: var(--wl-brand-primary);
	border-color: var(--wl-brand-primary);
	color: var(--wl-brand-on-primary);
}

html[data-wl-brand] {
	/* Espelha --alert-bg-*/--alert-text-* nativos do Frappe (usados por .alert-*, .desk-alert.*,
	   frappe.show_alert/msgprint) com a mesma paleta semântica que CRM/AVA já aplicam nos seus
	   Toast/.desk-alert — sem isso, os banners do Desk usam a paleta padrão do Frappe (vermelho/
	   verde fixos) em vez de --wl-danger/--wl-success/--wl-warning/--wl-info. */
	--alert-bg-danger: color-mix(in srgb, var(--wl-danger) 12%, var(--bg-color));
	--alert-text-danger: var(--wl-danger);
	--alert-bg-success: color-mix(in srgb, var(--wl-success) 12%, var(--bg-color));
	--alert-text-success: var(--wl-success);
	--alert-bg-warning: color-mix(in srgb, var(--wl-warning) 12%, var(--bg-color));
	--alert-text-warning: var(--wl-warning);
	--alert-bg-info: color-mix(in srgb, var(--wl-info) 12%, var(--bg-color));
	--alert-text-info: var(--wl-info);
	--btn-danger: var(--wl-danger);
}

html[data-wl-brand] :focus-visible {
	outline-color: var(--wl-focus);
}

html[data-wl-brand] [data-wl-brand-name] {
	color: var(--text-muted);
	font-family: var(--wl-heading-family), var(--font-stack);
	font-size: 0.8rem;
	margin-top: var(--margin-xs, 5px);
}