/* ============================================================================================================================
	rm-layout-tokens.css - the website's own layout values (Step 4, 5 Oct 2026): type sizes, spacing, radii, borders, shadows,
	component sizes, z-index layers, durations and the breakpoints, as CSS custom properties --rm-* on :root.

	Website only and hand-written: the brand (colours, focus rings, the accent rule, the font) is in rm-brand-tokens.css, generated
	from the website's brands\recuro-brand.json; the NLE plugins take only the brand and follow their host's own layout.
	Loaded right after rm-brand-tokens.css on every page, before Bootstrap; it only defines variables. README.md in this folder.
	A value here reproduces what the site showed before the token existed (same unit; checked element by element).
============================================================================================================================ */

:root {
	/* ---- Type sizes ---- */
	--rm-font-size-page: 0.875rem;					/* body (14 px) */
	--rm-font-size-body: 1rem;						/* .body-text */
	--rm-font-size-small: 0.85rem;					/* .body-text-small, dialogs */
	--rm-font-size-xsmall: 0.75rem;					/* .very-small-body-text */
	--rm-font-size-title: 0.9rem;					/* dialog and media entry titles */
	--rm-font-size-button: 13px;					/* primary/secondary buttons (bold, letter-spacing 1px) */
	--rm-letter-spacing: 1px;						/* buttons, headings */
	--rm-line-height: 1.5;
	--rm-font-size-h1: 36px;						/* headings (the old theme's scale) */
	--rm-font-size-h2: 30px;
	--rm-font-size-h3: 24px;
	--rm-font-size-h4: 18px;
	--rm-font-size-h5: 14px;
	--rm-font-size-h6: 12px;

	/* ---- Shapes ---- */
	--rm-radius: 4px;								/* buttons (0.25rem), fields, dialogs' title bars, grid frames, tooltips */
	--rm-radius-sm: 2px;							/* small marks: the mask rectangle, progress bars */
	--rm-border-width: 1px;
	--rm-shadow-dialog: 0px 10px 50px 5px rgba(0, 0, 0, 0.75);		/* dialogs and open drop-down lists */
	--rm-shadow-tooltip: 0px 0px 15px 5px rgba(0, 0, 0, 0.5);

	/* ---- Spacing ---- */
	--rm-space-1: 5px;
	--rm-space-2: 10px;
	--rm-space-3: 15px;
	--rm-space-4: 20px;								/* dialog body and footer padding */
	--rm-space-5: 30px;
	--rm-space-6: 40px;
	--rm-space-7: 50px;
	--rm-space-8: 60px;								/* sections, dividers */
	--rm-space-9: 80px;

	/* ---- Component sizes ---- */
	--rm-control-height: 2.375rem;					/* a field, a drop-down list's field (38 px; Bootstrap 4's input height - the switches are sized from it) */
	--rm-control-height-sm: 1.9375rem;				/* a small field (31 px; the small switches) */
	--rm-control-height-lg: 3rem;					/* a large field (48 px; the large switches) */

	/* ---- z-index layers (the page's stacking order, lowest first) ---- */
	--rm-z-raised: 1;								/* a box over its neighbours (the footer under a sticky page, the menu button) */
	--rm-z-raised-2: 2;							/* one more (a section's container, the gallery's toolbar and arrows) */
	--rm-z-overlay: 5;								/* an overlay over a video */
	--rm-z-side-header: 10;
	--rm-z-handle: 90;								/* the resize handles of a dragged box */
	--rm-z-badge: 100;								/* the warning sign on a media entry */
	--rm-z-header: 199;							/* the header, the sticky header, the mega menu */
	--rm-z-gototop: 299;							/* the go-to-top button */
	--rm-z-popup: 1000;							/* open drop-down lists, the cookie box, the page loader (Bootstrap's drop-down layer) */
	--rm-z-backdrop: 1040;							/* a dialog's backdrop (Bootstrap 4's value) */
	--rm-z-modal: 1050;							/* dialogs */
	--rm-z-popover: 1060;
	--rm-z-tooltip: 1070;
	--rm-z-lightbox: 1950;							/* a lightbox over a dialog */
	--rm-z-stacked: 1975;							/* a confirmation over a dialog, the keyframe dialog's overlays (above a lightbox; Step 7) */
	--rm-z-top: 2000;								/* the dialogs that cover everything: sign-in, social sign-up, the media player (Step 7) */
	--rm-z-notify: 999999;							/* the notifications (they are in the top layer anyway) */

	/* ---- Durations ---- */
	--rm-duration-xfast: 0.15s;
	--rm-duration-fast: 0.2s;						/* hover fades (the fast animation length) */
	--rm-duration-medium: 0.3s;
	--rm-duration-normal: 0.4s;						/* the default animation length */
	--rm-duration-slow: 1s;

	/* ---- Breakpoints (documented values: CSS cannot use variables in @media, so the queries write them out; brands\tokens.py check
	        fails when an @media width of our CSS is not one of these, or its -0.02 px / -1 px / +1 px edge) ---- */
	--rm-bp-xxs: 240px;								/* notifications: the narrowest phones */
	--rm-bp-xs-narrow: 480px;						/* notifications: phones */
	--rm-bp-xs: 544px;								/* small phones (the site's own, from Bootstrap 4's alpha) */
	--rm-bp-sm: 576px;								/* Bootstrap sm */
	--rm-bp-md: 768px;								/* Bootstrap md: tablets; the phone layouts end below */
	--rm-bp-lg: 992px;								/* Bootstrap lg: the desktop menu and sticky header start here */
	--rm-bp-lg-wide: 1100px;						/* the Connected Apps dialog's fixed App / Last used column widths start here (rm-components.css;
												   the owner's widths, 10 Oct 2026 - official breakpoint since 14 Oct 2026) */
	--rm-bp-xl: 1200px;								/* Bootstrap xl */
	--rm-bp-xxl: 1720px;							/* wide desktops (the site's own) */
}