/* The Material 3 colour roles of the host's m3.css on Radzen's palette, after radzen.css, which it overrides where
   both set a variable. The Software theme keeps one base scale for both schemes and picks other steps in the dark, so
   each scheme maps the steps to the roles that serve the same purpose: the light body is the surface and the text
   on-surface, the dark body is the surface too and base-50, the title, on-surface. Info, success, warning and the
   chart series have no Material role and keep the theme's colours */

:root[data-theme] {
	--rz-primary: var(--app-m3-primary);
	--rz-primary-light: var(--app-m3-primary-container);
	--rz-primary-lighter: color-mix(in srgb, var(--app-m3-primary) 12%, transparent);
	--rz-primary-dark: color-mix(in srgb, var(--app-m3-primary) 92%, var(--app-m3-on-primary));
	--rz-primary-darker: color-mix(in srgb, var(--app-m3-primary) 84%, var(--app-m3-on-primary));
	--rz-on-primary: var(--app-m3-on-primary);
	--rz-on-primary-light: var(--app-m3-on-primary-container);
	--rz-on-primary-lighter: var(--app-m3-primary);
	--rz-on-primary-dark: var(--app-m3-on-primary);
	--rz-on-primary-darker: var(--app-m3-on-primary);
	--rz-secondary: var(--app-m3-secondary);
	--rz-secondary-light: var(--app-m3-secondary-container);
	--rz-secondary-lighter: color-mix(in srgb, var(--app-m3-secondary) 12%, transparent);
	--rz-secondary-dark: color-mix(in srgb, var(--app-m3-secondary) 92%, var(--app-m3-on-secondary));
	--rz-secondary-darker: color-mix(in srgb, var(--app-m3-secondary) 84%, var(--app-m3-on-secondary));
	--rz-on-secondary: var(--app-m3-on-secondary);
	--rz-on-secondary-light: var(--app-m3-on-secondary-container);
	--rz-on-secondary-lighter: var(--app-m3-secondary);
	--rz-on-secondary-dark: var(--app-m3-on-secondary);
	--rz-on-secondary-darker: var(--app-m3-on-secondary);
	--rz-danger: var(--app-m3-error);
	--rz-danger-light: var(--app-m3-error-container);
	--rz-danger-lighter: color-mix(in srgb, var(--app-m3-error) 12%, transparent);
	--rz-danger-dark: color-mix(in srgb, var(--app-m3-error) 92%, var(--app-m3-on-error));
	--rz-danger-darker: color-mix(in srgb, var(--app-m3-error) 84%, var(--app-m3-on-error));
	--rz-on-danger: var(--app-m3-on-error);
	--rz-on-danger-light: var(--app-m3-on-error-container);
	--rz-on-danger-lighter: var(--app-m3-error);
	--rz-on-danger-dark: var(--app-m3-on-error);
	--rz-on-danger-darker: var(--app-m3-on-error);
	/* Material links are primary, the Software theme's secondary */
	--rz-link-color: var(--app-m3-primary);
}

/* The Software theme draws its sidebar dark in both schemes, and its lines read base steps, base-900 being on-surface
   in light */
:root[data-theme] {
	/* The logo's cut-out letters take the surface */
	--rz-header-background-color: var(--app-m3-surface);
	--rz-header-border: var(--rz-border-width) solid var(--app-m3-outline-variant);
	/* Material's surface tint at elevation level 2 */
	--rz-sidebar-background-color: color-mix(in srgb, var(--app-m3-primary) 8%, var(--app-m3-surface));
	--rz-sidebar-border-inline-end: var(--rz-border-width) solid var(--app-m3-outline-variant);
	--rz-sidebar-color: var(--app-m3-on-surface-variant);
	--rz-sidebar-toggle-background-color: var(--app-m3-surface);
	--rz-sidebar-toggle-border: var(--rz-border-width) solid var(--app-m3-outline-variant);
	--rz-sidebar-toggle-color: var(--app-m3-on-surface-variant);
	--rz-sidebar-toggle-hover-background-color: color-mix(in srgb, var(--app-m3-on-surface-variant) 8%, transparent);
	--rz-sidebar-toggle-hover-color: var(--app-m3-on-surface-variant);
	/* The avatar's trigger and the modules sit on the header like the sidebar toggle, in both schemes. The open menu
	   keeps its own surface */
	--rz-profile-menu-top-item-background-color: var(--app-m3-surface);
	--rz-menu-top-item-background-color: var(--app-m3-surface);
	/* Radzen marks the current module in the secondary, which reads as disabled on this palette. Half the
	   secondary-container marks it without competing with the drawer's current page */
	--rz-menu-top-item-border-radius: var(--rz-border-radius);
	--rz-menu-top-item-color: var(--app-m3-on-surface-variant);
	--rz-menu-top-item-icon-color: var(--app-m3-on-surface-variant);
	--rz-menu-top-item-hover-background-color: color-mix(in srgb, var(--app-m3-secondary-container) 25%, transparent);
	--rz-menu-top-item-hover-color: var(--app-m3-on-surface);
	--rz-menu-top-item-icon-hover-color: var(--app-m3-on-surface);
	--rz-menu-top-item-selected-background-color: color-mix(in srgb, var(--app-m3-secondary-container) 50%, transparent);
	--rz-menu-top-item-selected-color: var(--app-m3-on-surface);
	--rz-profile-menu-border: var(--rz-border-width) solid var(--app-m3-outline-variant);
	/* The theme fills the open menu's hover with the full secondary, which reads as a selection */
	--rz-profile-menu-item-hover-background-color: color-mix(in srgb, var(--app-m3-secondary-container) 50%, transparent);
	--rz-menu-item-hover-color: var(--app-m3-on-surface);
	--rz-panel-menu-item-background-color: transparent;
	--rz-panel-menu-item-border: var(--rz-border-width) solid var(--app-m3-outline-variant);
	--rz-panel-menu-item-color: var(--app-m3-on-surface-variant);
	/* Radzen's hover background replaces the active one, so a layer of on-surface would hide the current page */
	--rz-panel-menu-item-hover-background-color: color-mix(in srgb, var(--app-m3-secondary-container) 50%, transparent);
	--rz-panel-menu-item-hover-color: var(--app-m3-on-surface);
	--rz-panel-menu-item-active-background-color: var(--app-m3-secondary-container);
	/* The fidelity variant's on-secondary-container only just reaches 4.5:1 */
	--rz-panel-menu-item-active-color: var(--app-m3-on-surface);
	--rz-panel-menu-item-2nd-level-background-color: transparent;
	--rz-panel-menu-item-2nd-level-hover-background-color: color-mix(in srgb, var(--app-m3-secondary-container) 50%, transparent);
	--rz-panel-menu-item-2nd-level-active-background-color: var(--app-m3-secondary-container);
}

:root[data-theme="light"] {
	--rz-base-50: var(--app-m3-surface-container-lowest);
	--rz-base-100: var(--app-m3-surface);
	--rz-base-200: var(--app-m3-surface-container);
	--rz-base-300: var(--app-m3-outline-variant);
	--rz-base-400: var(--app-m3-surface-container-highest);
	--rz-base-500: var(--app-m3-outline);
	--rz-base-600: var(--app-m3-on-surface-variant);
	--rz-base-700: var(--app-m3-on-surface-variant);
	--rz-base-800: var(--app-m3-on-surface);
	--rz-base-900: var(--app-m3-on-surface);
	--rz-base-background-color: var(--app-m3-surface-container-lowest);
	--rz-on-base: var(--app-m3-on-surface);
	--rz-on-base-light: var(--app-m3-on-surface);
	--rz-on-base-lighter: var(--app-m3-on-surface);
}

:root[data-theme="dark"] {
	--rz-base-50: var(--app-m3-on-surface);
	--rz-base-100: var(--app-m3-on-surface);
	--rz-base-200: var(--app-m3-on-surface);
	--rz-base-300: var(--app-m3-on-surface-variant);
	--rz-base-400: var(--app-m3-on-surface-variant);
	--rz-base-500: var(--app-m3-outline);
	--rz-base-600: var(--app-m3-outline);
	--rz-base-700: var(--app-m3-surface-container-highest);
	--rz-base-800: var(--app-m3-surface-container);
	--rz-base-900: var(--app-m3-surface);
	--rz-base-background-color: var(--app-m3-surface-container);
	--rz-on-base: var(--app-m3-on-surface);
}