/* What the template sets on Radzen's theme from the product's tokens in its theme.css. Under the theme attribute, which
   outranks the theme's own :root */

/* The brand on Radzen's primary. The theme sets each shade as a literal, so they derive from the brand here */
:root[data-theme] {
	--rz-primary: var(--app-brand);
	--rz-primary-light: color-mix(in srgb, var(--app-brand) 88%, white);
	--rz-primary-lighter: color-mix(in srgb, var(--app-brand) 16%, transparent);
	--rz-primary-dark: color-mix(in srgb, var(--app-brand) 92%, black);
	--rz-primary-darker: color-mix(in srgb, var(--app-brand) 75%, black);
	--rz-on-primary-lighter: var(--app-brand);
}

/* The theme's lighter shades read below 4.5:1 in light. Danger takes Material's error in material3.css */
:root[data-theme="light"] {
	--rz-on-info-lighter: color-mix(in srgb, var(--rz-info) 50%, black);
	--rz-on-success-lighter: color-mix(in srgb, var(--rz-success) 50%, black);
	--rz-on-warning-lighter: color-mix(in srgb, var(--rz-warning) 50%, black);
}

/* The software theme draws every linear bar 1.25rem high. Like the Zen theme, a bar is slim unless it shows its value.
   Set at the root, so AppLoading's slot reads the same height */
:root[data-theme] {
	--rz-progressbar-height: 0.25rem;
}

.rz-progressbar:has(.rz-progressbar-label) {
	--rz-progressbar-height: 1.25rem;
}

/* AppFooter carries one line of small print, which the theme's 1rem padding on every side makes a bar of its own */
:root[data-theme] {
	--rz-footer-padding: var(--app-space-2) var(--app-space-4);
}