/*
 * Ultimate Member an das Yuhura-3-Designsystem angleichen.
 *
 * Wird ausschließlich für ausgeloggte Besucher geladen
 * (Features\UltimateMemberBeautifier, Option "UM Beautifier").
 *
 * Die Roh-Tokens --y3-color-<mode>-* und --y3-button-* liefert
 * Settings::design_css( ':root' ) als Inline-Style direkt hinter dieser Datei;
 * ausgegeben wird nur, was im Backend tatsächlich gesetzt wurde. Die Zuordnung
 * auf die semantischen Namen steckt sonst in core.css unter .y3-ui — die wird
 * auf UM-Seiten für Gäste nicht geladen, deshalb steht sie hier noch einmal.
 * Jedes var() braucht darum einen Fallback.
 *
 * Nicht Teil der Tailwind-Pipeline (build:css baut nur core.css und
 * public-pages.css) — diese Datei wird von Hand gepflegt.
 */

.um {
	--y3-color-primary: var(--y3-color-light-primary, var(--color-content-primary, #175cd3));
	--y3-color-primary-contrast: var(--y3-color-light-primary-contrast, #ffffff);
	--y3-color-surface: var(--y3-color-light-surface, var(--color-content-bg, #ffffff));
	--y3-color-surface-alt: var(--y3-color-light-surface-alt, var(--color-content-bg-alt, #f5f5f5));
	--y3-color-border: var(--y3-color-light-border, var(--color-content-border, #d7d7d7));
	--y3-color-heading: var(--y3-color-light-heading, var(--color-content-heading, currentColor));
	--y3-color-text: var(--y3-color-light-text, var(--color-content-text, currentColor));
	--y3-color-muted: var(--y3-color-light-muted, var(--color-content-faded, #667085));
	--y3-color-danger: var(--y3-color-light-danger, #b42318);

	--y3-button-primary-background: var(--y3-button-primary-light-background, var(--y3-color-primary));
	--y3-button-primary-text: var(--y3-button-primary-light-text, var(--y3-color-primary-contrast));
	--y3-button-primary-border: var(--y3-button-primary-light-border, var(--y3-color-primary));
	--y3-button-primary-background-hover: var(--y3-button-primary-light-background-hover, color-mix(in srgb, var(--y3-color-primary) 85%, black));
	--y3-button-primary-text-hover: var(--y3-button-primary-light-text-hover, var(--y3-color-primary-contrast));
	--y3-button-primary-border-hover: var(--y3-button-primary-light-border-hover, color-mix(in srgb, var(--y3-color-primary) 85%, black));
	--y3-button-primary-focus: var(--y3-button-primary-light-focus, var(--y3-color-primary));

	--y3-button-secondary-background: var(--y3-button-secondary-light-background, var(--y3-color-surface));
	--y3-button-secondary-text: var(--y3-button-secondary-light-text, var(--y3-color-text));
	--y3-button-secondary-border: var(--y3-button-secondary-light-border, var(--y3-color-border));
	--y3-button-secondary-background-hover: var(--y3-button-secondary-light-background-hover, var(--y3-color-surface-alt));
	--y3-button-secondary-text-hover: var(--y3-button-secondary-light-text-hover, var(--y3-color-heading));
	--y3-button-secondary-border-hover: var(--y3-button-secondary-light-border-hover, var(--y3-color-border));
	--y3-button-secondary-focus: var(--y3-button-secondary-light-focus, var(--y3-color-primary));
}

[data-y3-theme="dark"] .um,
.um[data-y3-theme="dark"] {
	--y3-color-primary: var(--y3-color-dark-primary, var(--color-alt-content-primary, #84adff));
	--y3-color-primary-contrast: var(--y3-color-dark-primary-contrast, #101828);
	--y3-color-surface: var(--y3-color-dark-surface, var(--color-alt-content-bg, #18181b));
	--y3-color-surface-alt: var(--y3-color-dark-surface-alt, var(--color-alt-content-bg-alt, #27272a));
	--y3-color-border: var(--y3-color-dark-border, var(--color-alt-content-border, #52525b));
	--y3-color-heading: var(--y3-color-dark-heading, var(--color-alt-content-heading, #ffffff));
	--y3-color-text: var(--y3-color-dark-text, var(--color-alt-content-text, #f4f4f5));
	--y3-color-muted: var(--y3-color-dark-muted, var(--color-alt-content-faded, #a1a1aa));
	--y3-color-danger: var(--y3-color-dark-danger, #f97066);

	--y3-button-primary-background: var(--y3-button-primary-dark-background, var(--y3-color-primary));
	--y3-button-primary-text: var(--y3-button-primary-dark-text, var(--y3-color-primary-contrast));
	--y3-button-primary-border: var(--y3-button-primary-dark-border, var(--y3-color-primary));
	--y3-button-primary-background-hover: var(--y3-button-primary-dark-background-hover, color-mix(in srgb, var(--y3-color-primary) 85%, black));
	--y3-button-primary-text-hover: var(--y3-button-primary-dark-text-hover, var(--y3-color-primary-contrast));
	--y3-button-primary-border-hover: var(--y3-button-primary-dark-border-hover, color-mix(in srgb, var(--y3-color-primary) 85%, black));
	--y3-button-primary-focus: var(--y3-button-primary-dark-focus, var(--y3-color-primary));

	--y3-button-secondary-background: var(--y3-button-secondary-dark-background, var(--y3-color-surface));
	--y3-button-secondary-text: var(--y3-button-secondary-dark-text, var(--y3-color-text));
	--y3-button-secondary-border: var(--y3-button-secondary-dark-border, var(--y3-color-border));
	--y3-button-secondary-background-hover: var(--y3-button-secondary-dark-background-hover, var(--y3-color-surface-alt));
	--y3-button-secondary-text-hover: var(--y3-button-secondary-dark-text-hover, var(--y3-color-heading));
	--y3-button-secondary-border-hover: var(--y3-button-secondary-dark-border-hover, var(--y3-color-border));
	--y3-button-secondary-focus: var(--y3-button-secondary-dark-focus, var(--y3-color-primary));
}

/*
 * um-styles.css setzt border-radius, padding, border und font-weight mit
 * !important — die Angleichung muss deshalb ebenfalls !important benutzen.
 */
.um a.um-button,
.um input[type="submit"].um-button,
.um input[type="submit"].um-button:focus {
	background: var(--y3-button-primary-background) !important;
	color: var(--y3-button-primary-text) !important;
	border: var(--y3-button-primary-border-width, 1px) solid var(--y3-button-primary-border) !important;
	border-radius: var(--y3-button-primary-radius, var(--y3-button-radius, 0.5rem)) !important;
	padding: var(--y3-button-primary-padding-y, 0.5rem) var(--y3-button-primary-padding-x, 1.5rem) !important;
	min-height: var(--y3-button-primary-min-height, 2.75rem);
	font-size: var(--y3-button-primary-font-size, inherit);
	font-weight: var(--y3-button-primary-font-weight, inherit) !important;
	letter-spacing: var(--y3-button-primary-letter-spacing, normal);
	text-transform: var(--y3-button-primary-text-transform, none) !important;
	transition: var(--y3-button-primary-transition-duration, 0.2s);
	box-shadow: var(--y3-button-primary-shadow, none) !important;
}

/*
 * a.um-button ist bei UM ein display:block-Link mit fester line-height — der
 * Text sitzt dadurch neben der min-height oben statt mittig. Flex zentriert
 * ihn in beide Richtungen; .um-btn-auto-width bleibt inline.
 */
.um a.um-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	line-height: normal !important;
}

.um a.um-button.um-btn-auto-width {
	display: inline-flex !important;
}

.um a.um-button:hover,
.um input[type="submit"].um-button:hover {
	background: var(--y3-button-primary-background-hover) !important;
	color: var(--y3-button-primary-text-hover) !important;
	border-color: var(--y3-button-primary-border-hover) !important;
	box-shadow: var(--y3-button-primary-shadow-hover, none) !important;
}

.um a.um-button:focus-visible,
.um input[type="submit"].um-button:focus-visible {
	outline: var(--y3-button-primary-focus-width, 2px) solid var(--y3-button-primary-focus);
	outline-offset: var(--y3-button-primary-focus-offset, 2px);
}

.um a.um-button.um-alt,
.um input[type="submit"].um-button.um-alt {
	background: var(--y3-button-secondary-background) !important;
	color: var(--y3-button-secondary-text) !important;
	border: var(--y3-button-secondary-border-width, 1px) solid var(--y3-button-secondary-border) !important;
	border-radius: var(--y3-button-secondary-radius, var(--y3-button-radius, 0.5rem)) !important;
	padding: var(--y3-button-secondary-padding-y, 0.5rem) var(--y3-button-secondary-padding-x, 1.5rem) !important;
	box-shadow: var(--y3-button-secondary-shadow, none) !important;
}

.um a.um-button.um-alt:hover,
.um input[type="submit"].um-button.um-alt:hover {
	background: var(--y3-button-secondary-background-hover) !important;
	color: var(--y3-button-secondary-text-hover) !important;
	border-color: var(--y3-button-secondary-border-hover) !important;
	box-shadow: var(--y3-button-secondary-shadow-hover, none) !important;
}

.um a.um-button.um-alt:focus-visible,
.um input[type="submit"].um-button.um-alt:focus-visible {
	outline: var(--y3-button-secondary-focus-width, 2px) solid var(--y3-button-secondary-focus);
	outline-offset: var(--y3-button-secondary-focus-offset, 2px);
}

.um a.um-button.um-disabled,
.um a.um-button.um-disabled:active,
.um a.um-button.um-disabled:focus,
.um a.um-button.um-disabled:hover {
	background: var(--y3-button-primary-background) !important;
	color: var(--y3-button-primary-text) !important;
	opacity: var(--y3-button-primary-disabled-opacity, 0.55);
}