/* The product's values: the tokens the template's stylesheets read. Nothing but --app-* tokens under the root and the
   dark scheme, which StylesheetTests checks. The rules of the host's own markup are in app.css */

:root {
	--app-brand: #0070a0;

	/* The loading screen, before Radzen's variables exist, on the surface of m3.css */
	--app-startup-background: #f9f9f9;
	--app-startup-text: #0f172a;
	--app-startup-muted: #64748b;
	--app-startup-track: rgba(15, 23, 42, 0.1);
	--app-startup-bar: rgb(35 100 136);
	--app-logo-blue: var(--app-brand);
	--app-logo-grey: #444;
	--app-logo-white: #fff;

	/* Blazor's error boundary draws its icon at a size the scale has no step for */
	--app-error-icon-size: 1.8rem;
}

:root[data-theme="dark"] {
	/* The brand lightened, so it keeps its contrast on the dark background */
	--app-brand: #1e8fbd;
	--app-startup-background: #131313;
	--app-startup-text: #f5f8f9;
	--app-startup-muted: #dae0e2;
	--app-startup-track: rgba(255, 255, 255, 0.15);
	--app-startup-bar: #f5f8f9;
	--app-logo-blue: #fff;
	--app-logo-grey: #fff;
	/* The letters in the mark take the background, so the all-white logo shows them cut out */
	--app-logo-white: var(--app-startup-background);
}