/* ============================================================================================================================
	rm-brand-tokens.css - Recuro Media's brand tokens (CSS custom properties --rm-* on :root).

	GENERATED by brand\tokens.py from brand\recuro-brand.json - do not edit here: change recuro-brand.json, then run
	"python brand\tokens.py generate" (and "check"). Version 1.3.0.

	Only the brand is here (colours, the focus rings, the accent rule, the font); the website's sizes, spacing, radii, shadows,
	z-index layers, durations and breakpoints are in rm-layout-tokens.css (website only - the NLE plugins follow their host).
	Loaded first on every page, before Bootstrap; it only defines variables. README.md in this folder says how they are used.
============================================================================================================================ */

:root {
	/* ---- Brand colour and greys ---- */
	--rm-orange: #C5580A;							/* Recuro Media orange: buttons, progress bars, selected rows, links on hover */
	--rm-orange-rgb: 197, 88, 10;					/* the orange as R, G, B (for rgba() with an alpha of its own) */
	--rm-orange-hover: #DA620B;						/* the orange under the pointer */
	--rm-black: #000000;
	--rm-darker: #222222;							/* dialog, card and media entry backgrounds */
	--rm-dark: #333333;								/* fields, select buttons, tooltips, grid frames */
	--rm-dark-hover: #474747;						/* a dark field under the pointer */
	--rm-mid-grey: #666666;							/* switches (off), muted text on light backgrounds */
	--rm-grey: #A6A6A6;								/* secondary buttons */
	--rm-grey-hover: #B3B3B3;						/* a secondary button under the pointer */
	--rm-light: #CDCDCD;							/* borders of dark boxes, light grey text */
	--rm-lighter: #EEEEEE;							/* text on dark grey, light buttons */
	--rm-white: #FFFFFF;
	--rm-page-dark: #1B1B1B;						/* the dark page background (the mean colour of the site's background pattern, shown while it loads) */
	--rm-grey-28: #282828;							/* dark scheme: boxes and borders (the old theme's dark parts) */
	--rm-grey-38: #383838;							/* dark scheme: fields and borders */
	--rm-grey-3f: #3F3F3F;							/* dark scheme: borders */
	--rm-grey-44: #444444;							/* headings on light backgrounds */
	--rm-grey-49: #494949;							/* dark scheme: borders, buttons */
	--rm-grey-55: #555555;							/* body text on light backgrounds (text.text) */
	--rm-grey-77: #777777;
	--rm-grey-88: #888888;							/* the info colour (state.info), muted text */
	--rm-grey-99: #999999;							/* muted text, placeholders */
	--rm-grey-aa: #AAAAAA;
	--rm-grey-bb: #BBBBBB;
	--rm-grey-c8: #C8C8C8;
	--rm-grey-cc: #CCCCCC;							/* light borders */
	--rm-grey-dd: #DDDDDD;							/* list rows and light text on dark grey */
	--rm-grey-e5: #E5E5E5;							/* light borders */
	--rm-grey-f5: #F5F5F5;							/* light backgrounds */
	--rm-grey-f9: #F9F9F9;							/* light section backgrounds */
	--rm-white-05: rgba(255, 255, 255, 0.05);		/* white at 5 % (tints and shadows) */
	--rm-white-08: rgba(255, 255, 255, 0.08);		/* white at 8 % (tints and shadows) */
	--rm-white-10: rgba(255, 255, 255, 0.1);		/* white at 10 % (tints and shadows) */
	--rm-white-15: rgba(255, 255, 255, 0.15);		/* white at 15 % (tints and shadows) */
	--rm-white-20: rgba(255, 255, 255, 0.2);		/* white at 20 % (tints and shadows) */
	--rm-black-10: rgba(0, 0, 0, 0.1);				/* black at 10 % (tints and shadows) */
	--rm-black-15: rgba(0, 0, 0, 0.15);				/* black at 15 % (tints and shadows) */
	--rm-black-20: rgba(0, 0, 0, 0.2);				/* black at 20 % (tints and shadows) */
	--rm-black-25: rgba(0, 0, 0, 0.25);				/* black at 25 % (tints and shadows) */
	--rm-black-30: rgba(0, 0, 0, 0.3);				/* black at 30 % (tints and shadows) */
	--rm-black-50: rgba(0, 0, 0, 0.5);				/* black at 50 % (tints and shadows) */
	--rm-black-75: rgba(0, 0, 0, 0.75);				/* black at 75 % (tints and shadows) */

	/* ---- Text ---- */
	--rm-text: var(--rm-grey-55);					/* body text on light backgrounds (the page default) */
	--rm-text-on-dark: var(--rm-lighter);			/* text in dark boxes */
	--rm-link-on-dark: #F58433;						/* text links on dark backgrounds: the Recuro orange (same hue and saturation) made lighter, WCAG AA on every dark grey of the site (6.2:1 on darker, 4.9:1 on dark, 6.7:1 on page-dark; the orange itself has 3.6:1 on darker) */
	--rm-text-light: var(--rm-light);				/* .my-light-grey */
	--rm-text-mid: var(--rm-mid-grey);				/* .my-mid-grey */
	--rm-text-dark: var(--rm-dark);					/* .my-dark-grey */
	--rm-text-header: var(--rm-darker);				/* dialog and media entry title bars */

	/* ---- States ---- */
	--rm-warning: #BC352E;
	--rm-info: var(--rm-grey-88);
	--rm-success: #009900;
	--rm-field-error: #E42C3E;						/* a field with an error (border, text) */
	--rm-field-error-placeholder: rgba(228, 44, 62, 0.6);	/* the placeholder of a field with an error (the red at 60 %) */

	/* ---- Notifications ---- */
	--rm-toast-warning: #F89406;					/* notification: warning */
	--rm-toast-error: #BD362F;						/* notification: error */

	/* ---- Focus rings ---- */
	--rm-orange-focus: rgba(197, 88, 10, 0.5);		/* focus ring of buttons (the orange at 50 %) */
	--rm-orange-focus-soft: rgba(197, 88, 10, 0.25);	/* focus ring of fields, selects, paging (the orange at 25 %) */

	/* ---- The accent (company colour rule) ---- */
	--theme-color: var(--rm-orange);				/* the company theme colour; the default is our orange (the website's workspace replaces it with a company's colour) */
	--rm-accent: var(--theme-color, var(--rm-orange));	/* the company colour, else our orange */
	--rm-accent-focus: var(--rm-orange-focus);		/* focus ring of buttons: the accent at 50 % (the orange's ring without colour mixing) */
	--rm-accent-focus-soft: var(--rm-orange-focus-soft);	/* focus ring of fields, selects, paging: the accent at 25 % (the orange's ring without colour mixing) */

	/* ---- Font ---- */
	--rm-font-family: 'Lato', sans-serif;			/* Lato regular, self-hosted on the website (website\assets\fonts\lato, SIL OFL 1.1); a host that cannot load it falls back to its system sans-serif */
	--rm-font-weight-bold: 700;						/* buttons, headings, emphasis */
}

/* The rings follow a company's own theme colour where the browser can mix colours */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
	:root {
		--rm-accent-focus: color-mix(in srgb, var(--rm-accent) 50%, transparent);
		--rm-accent-focus-soft: color-mix(in srgb, var(--rm-accent) 25%, transparent);
	}
}