/*
 * plat_tokens.css: the kit's colour roles for Look 1 and Look 2, in light and dark mode (K-b section B),
 * and the shared type, radius, shadow and motion settings (K-b section A).
 * <html data-plat-look="1|2" data-bs-theme="light|dark"> picks the block; no look attribute = Look 2.
 * An element that carries both attributes shows that look and mode inside a page of another look.
 * The numbered tokens (--plat-<role>--<n>) are the component settings of T-kit-tokens; each now follows its role.
 */
:root {
	/* Type (K-b A1, A2). Phone sizes here; 600 px and wider below. Use as font: var(--plat-type-…); letter-spacing: var(--plat-ls-…). */
	--plat-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--plat-font-mono: ui-monospace, 'SF Mono', Consolas, monospace;
	--plat-type-title: 700 24px/30px var(--plat-font-sans);
	--plat-type-section: 600 18px/24px var(--plat-font-sans);
	--plat-type-card: 600 16px/22px var(--plat-font-sans);
	--plat-type-body: 400 15px/22px var(--plat-font-sans);
	--plat-type-body-strong: 600 15px/22px var(--plat-font-sans);
	--plat-type-small: 400 13px/18px var(--plat-font-sans);
	--plat-type-label: 600 13px/18px var(--plat-font-sans);
	--plat-type-overline: 600 11px/16px var(--plat-font-sans);
	--plat-type-thead: 600 12px/16px var(--plat-font-sans);
	--plat-type-button: 600 15px/20px var(--plat-font-sans);
	--plat-type-button-sm: 600 13px/18px var(--plat-font-sans);
	--plat-type-badge: 600 12px/16px var(--plat-font-sans);
	--plat-type-field: 400 16px/24px var(--plat-font-sans);
	--plat-type-stat: 700 28px/32px var(--plat-font-sans);
	--plat-type-stat-label: 600 11px/16px var(--plat-font-sans);
	--plat-type-side-item: 500 14px/20px var(--plat-font-sans);
	--plat-type-auth-headline: 700 30px/36px var(--plat-font-sans);
	--plat-type-auth-title: 700 24px/30px var(--plat-font-sans);
	--plat-type-toast: 500 14px/20px var(--plat-font-sans);
	--plat-ls-title: -0.02em;
	--plat-ls-section: -0.01em;
	--plat-ls-card: -0.01em;
	--plat-ls-overline: 0.08em;
	--plat-ls-thead: 0.06em;
	--plat-ls-stat: -0.02em;
	--plat-ls-stat-label: 0.08em;
	--plat-ls-auth: -0.02em;

	/* Corner radii (K-b A4) */
	--plat-r-xs: 4px;
	--plat-r-sm: 8px;
	--plat-r-md: 12px;
	--plat-r-lg: 16px;
	--plat-r-pill: 999px;

	/* Motion (K-b A7) */
	--plat-ease: cubic-bezier(0.2, 0, 0, 1);
	--plat-ease-out: cubic-bezier(0.4, 0, 1, 1);
	--plat-dur-state: 120ms;
	--plat-dur-reveal: 160ms;
	--plat-dur-reveal-out: 120ms;
	--plat-dur-dialog: 180ms;
	--plat-dur-dialog-out: 140ms;
	--plat-dur-sheet: 240ms;
	--plat-dur-sheet-out: 200ms;
	--plat-dur-scrim: 160ms;
	--plat-dur-size: 200ms;
	--plat-dur-tab: 160ms;
	--plat-dur-step: 200ms;
	--plat-dur-drop: 160ms;
	--plat-dur-shimmer: 1400ms;
	--plat-dur-count: 600ms;
	--plat-move-reveal: 4px;
	--plat-move-toast: 8px;
	--plat-move-step: 12px;
	--plat-scale-dialog: 0.98;

	/* Component colours with no K-b role: content, paper, checkerboards and today's component shadows (unchanged) */
	--plat-auth-shadow: rgba(15, 23, 42, 0.04);
	--plat-auth-shadow--2: rgba(15, 23, 42, 0.08);
	--plat-auth-shadow--3: rgba(15, 23, 42, 0.06);
	--plat-auth-shadow--4: rgba(15, 23, 42, 0.12);
	--plat-barcode-bg: #ffffff;
	--plat-barcode-bg--2: #000000;
	--plat-barcode-bg--3: rgba(25, 135, 84, 0.95);
	--plat-barcode-bg--4: rgba(255, 60, 60, 0.85);
	--plat-barcode-fg: #ffffff;
	--plat-barcode-line: #dee2e6;
	--plat-barcode-line--2: rgba(0, 0, 0, 0.12);
	--plat-barcode-line--3: rgba(255, 255, 255, 0.95);
	--plat-barcode-shadow: rgba(255, 60, 60, 0.8);
	--plat-card-accent: #5b39c6;
	--plat-card-accent--2: #6f42c1;
	--plat-card-accent--3: #8b6fd4;
	--plat-card-accent--4: #eee8ff;
	--plat-card-shadow: rgba(15, 23, 42, 0.06);
	--plat-card-shadow--2: rgba(15, 23, 42, 0.12);
	--plat-card-shadow--3: rgba(15, 23, 42, 0.22);
	--plat-card-shadow--4: rgba(15, 23, 42, 0.25);
	--plat-color-picker-checker: #d1d5db;
	--plat-color-picker-checker--2: #ffffff;
	--plat-color-picker-checker--3: #334155;
	--plat-color-picker-checker--4: #1e293b;
	--plat-color-picker-shadow: rgba(15, 23, 42, 0.12);
	--plat-command-palette-shadow: rgba(15, 23, 42, 0.18);
	--plat-cropper-checker: #cfd4da;
	--plat-cropper-checker--2: #ffffff;
	--plat-cropper-checker--3: #334155;
	--plat-cropper-checker--4: #1e293b;
	--plat-cropper-reticle: #ffffff;
	--plat-cropper-reticle--2: rgba(0, 0, 0, 0.45);
	--plat-cropper-reticle--3: rgba(0, 0, 0, 0.55);
	--plat-datepicker-shadow: rgba(15, 23, 42, 0.12);
	--plat-datepicker-shadow--2: rgba(0, 0, 0, 0.45);
	--plat-faceted-filter-scrollbar: rgba(0, 0, 0, 0.2);
	--plat-layout-shadow: rgba(15, 23, 42, 0.06);
	--plat-layout-shadow--2: rgba(15, 23, 42, 0.12);
	--plat-layout-shadow--3: rgba(15, 23, 42, 0.18);
	--plat-layout-shadow--4: rgba(16, 24, 40, 0.05);
	--plat-modal-shadow: rgba(15, 23, 42, 0.18);
	--plat-qr-bg: #ffffff;
	--plat-qr-line: #000000;
	--plat-qr-line--2: #dee2e6;
	--plat-slider-shadow: rgba(0, 0, 0, 0.12);
	--plat-splitbtn-shadow: rgba(15, 23, 42, 0.04);
	--plat-splitbtn-shadow--2: rgba(15, 23, 42, 0.06);
	--plat-splitbtn-shadow--3: rgba(15, 23, 42, 0.12);
	--plat-splitbtn-shadow--4: rgba(255, 255, 255, 0.22);
	--plat-splitbtn-shadow--5: rgba(0, 0, 0, 0.25);
	--plat-splitbtn-shadow--6: rgba(0, 0, 0, 0.35);
	--plat-stat-card-accent: #20c997;
	--plat-stat-card-accent--2: #6610f2;
	--plat-stat-card-accent--3: #6f42c1;
	--plat-stat-card-shadow: rgba(0, 0, 0, 0.075);
	--plat-stat-card-shadow--2: rgba(0, 0, 0, 0.15);
	--plat-stat-card-shadow--3: rgba(0, 0, 0, 0.35);
	--plat-stepper-shadow: rgba(0, 0, 0, 0.08);
	--plat-timeline-accent: #20c997;
	--plat-timeline-accent--2: #6610f2;
	--plat-timeline-accent--3: #6f42c1;
	--plat-timeline-accent--4: #fd7e14;
	--plat-tour-shadow: rgba(15, 23, 42, 0.15);
	--plat-tour-shadow--2: rgba(0, 0, 0, 0.45);
}

@media (min-width: 600px) {
	:root {
		--plat-type-title: 700 28px/34px var(--plat-font-sans);
		--plat-type-section: 600 20px/26px var(--plat-font-sans);
		--plat-type-card: 600 17px/24px var(--plat-font-sans);
		--plat-type-body: 400 14px/20px var(--plat-font-sans);
		--plat-type-body-strong: 600 14px/20px var(--plat-font-sans);
		--plat-type-button: 600 14px/20px var(--plat-font-sans);
		--plat-type-field: 400 14px/20px var(--plat-font-sans);
		--plat-type-stat: 700 32px/36px var(--plat-font-sans);
		--plat-type-auth-title: 700 26px/32px var(--plat-font-sans);
		--plat-type-toast: 500 13px/18px var(--plat-font-sans);
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--plat-dur-reveal: 100ms;
		--plat-dur-reveal-out: 100ms;
		--plat-dur-dialog: 100ms;
		--plat-dur-dialog-out: 100ms;
		--plat-dur-sheet: 100ms;
		--plat-dur-sheet-out: 100ms;
		--plat-dur-tab: 0ms;
		--plat-dur-step: 100ms;
		--plat-dur-drop: 0ms;
		--plat-dur-shimmer: 0ms;
		--plat-dur-count: 0ms;
		--plat-move-reveal: 0px;
		--plat-move-toast: 0px;
		--plat-move-step: 0px;
		--plat-scale-dialog: 1;
	}
}

/* Every numbered component token follows its role; resolved again on every element that sets a look or a mode. */
:root,
[data-bs-theme],
[data-plat-look] {
	--plat-canvas--2: var(--plat-canvas);
	--plat-canvas--3: var(--plat-canvas);
	--plat-canvas--4: var(--plat-canvas);
	--plat-canvas--5: var(--plat-canvas);
	--plat-canvas--6: var(--plat-canvas);
	--plat-canvas--7: var(--plat-canvas);
	--plat-canvas--8: var(--plat-canvas);
	--plat-surface--2: var(--plat-surface);
	--plat-surface--3: var(--plat-surface);
	--plat-surface--4: var(--plat-surface);
	--plat-surface--5: var(--plat-surface);
	--plat-surface--6: var(--plat-surface);
	--plat-surface--7: var(--plat-surface);
	--plat-surface--8: var(--plat-surface);
	--plat-surface--9: var(--plat-surface);
	--plat-surface--10: var(--plat-surface);
	--plat-surface--11: var(--plat-surface);
	--plat-raised--2: var(--plat-raised);
	--plat-raised--3: var(--plat-raised);
	--plat-raised--4: var(--plat-raised);
	--plat-raised--5: var(--plat-raised);
	--plat-raised--6: var(--plat-raised);
	--plat-raised--7: var(--plat-raised);
	--plat-raised--8: var(--plat-raised);
	--plat-field--2: var(--plat-field);
	--plat-field--3: var(--plat-field);
	--plat-field--4: var(--plat-field);
	--plat-hover--2: var(--plat-hover);
	--plat-hover--3: var(--plat-hover);
	--plat-hover--4: var(--plat-hover);
	--plat-hover--5: var(--plat-hover);
	--plat-hover--6: var(--plat-hover);
	--plat-hover--7: var(--plat-hover);
	--plat-hover--8: var(--plat-hover);
	--plat-hover--9: var(--plat-hover);
	--plat-hover--10: var(--plat-hover);
	--plat-hover--11: var(--plat-hover);
	--plat-hover--12: var(--plat-hover);
	--plat-hover--13: var(--plat-hover);
	--plat-hover--14: var(--plat-hover);
	--plat-pressed--2: var(--plat-pressed);
	--plat-pressed--3: var(--plat-pressed);
	--plat-pressed--4: var(--plat-pressed);
	--plat-thead--2: var(--plat-thead);
	--plat-thead--3: var(--plat-thead);
	--plat-thead--4: var(--plat-thead);
	--plat-thead--5: var(--plat-thead);
	--plat-border--2: var(--plat-border);
	--plat-border--3: var(--plat-border);
	--plat-border--4: var(--plat-border);
	--plat-border--5: var(--plat-border);
	--plat-border--6: var(--plat-border);
	--plat-border--7: var(--plat-border);
	--plat-border--8: var(--plat-border);
	--plat-border--9: var(--plat-border);
	--plat-border--10: var(--plat-border);
	--plat-border--11: var(--plat-border);
	--plat-border--12: var(--plat-border);
	--plat-border--13: var(--plat-border);
	--plat-border--14: var(--plat-border);
	--plat-border--15: var(--plat-border);
	--plat-border--16: var(--plat-border);
	--plat-border--17: var(--plat-border);
	--plat-border--18: var(--plat-border);
	--plat-border--19: var(--plat-border);
	--plat-border--20: var(--plat-border);
	--plat-border--21: var(--plat-border);
	--plat-border--22: var(--plat-border);
	--plat-border--23: var(--plat-border);
	--plat-border--24: var(--plat-border);
	--plat-border--25: var(--plat-border);
	--plat-border--26: var(--plat-border);
	--plat-border--27: var(--plat-border);
	--plat-border--28: var(--plat-border);
	--plat-border--29: var(--plat-border);
	--plat-border--30: var(--plat-border);
	--plat-border-strong--2: var(--plat-border-strong);
	--plat-border-strong--3: var(--plat-border-strong);
	--plat-border-strong--4: var(--plat-border-strong);
	--plat-border-strong--5: var(--plat-border-strong);
	--plat-border-strong--6: var(--plat-border-strong);
	--plat-border-strong--7: var(--plat-border-strong);
	--plat-border-strong--8: var(--plat-border-strong);
	--plat-border-strong--9: var(--plat-border-strong);
	--plat-border-strong--10: var(--plat-border-strong);
	--plat-border-strong--11: var(--plat-border-strong);
	--plat-border-strong--12: var(--plat-border-strong);
	--plat-border-strong--13: var(--plat-border-strong);
	--plat-border-strong--14: var(--plat-border-strong);
	--plat-text--2: var(--plat-text);
	--plat-text--3: var(--plat-text);
	--plat-text--4: var(--plat-text);
	--plat-text--5: var(--plat-text);
	--plat-text--6: var(--plat-text);
	--plat-text--7: var(--plat-text);
	--plat-text--8: var(--plat-text);
	--plat-text--9: var(--plat-text);
	--plat-text--10: var(--plat-text);
	--plat-text--11: var(--plat-text);
	--plat-text--12: var(--plat-text);
	--plat-text--13: var(--plat-text);
	--plat-text-2--2: var(--plat-text-2);
	--plat-text-2--3: var(--plat-text-2);
	--plat-text-2--4: var(--plat-text-2);
	--plat-text-2--5: var(--plat-text-2);
	--plat-text-2--6: var(--plat-text-2);
	--plat-text-2--7: var(--plat-text-2);
	--plat-text-2--8: var(--plat-text-2);
	--plat-text-2--9: var(--plat-text-2);
	--plat-text-2--10: var(--plat-text-2);
	--plat-text-2--11: var(--plat-text-2);
	--plat-text-2--12: var(--plat-text-2);
	--plat-text-2--13: var(--plat-text-2);
	--plat-text-dis--2: var(--plat-text-dis);
	--plat-text-dis--3: var(--plat-text-dis);
	--plat-link--2: var(--plat-link);
	--plat-link--3: var(--plat-link);
	--plat-link--4: var(--plat-link);
	--plat-link--5: var(--plat-link);
	--plat-action--2: var(--plat-action);
	--plat-action--3: var(--plat-action);
	--plat-action--4: var(--plat-action);
	--plat-action--5: var(--plat-action);
	--plat-action--6: var(--plat-action);
	--plat-action--7: var(--plat-action);
	--plat-action--8: var(--plat-action);
	--plat-action--9: var(--plat-action);
	--plat-action--10: var(--plat-action);
	--plat-action-hover--2: var(--plat-action-hover);
	--plat-action-hover--3: var(--plat-action-hover);
	--plat-action-hover--4: var(--plat-action-hover);
	--plat-action-hover--5: var(--plat-action-hover);
	--plat-action-press--2: var(--plat-action-press);
	--plat-on-action--2: var(--plat-on-action);
	--plat-on-action--3: var(--plat-on-action);
	--plat-on-action--4: var(--plat-on-action);
	--plat-action-tint--2: var(--plat-action-tint);
	--plat-action-tint--3: var(--plat-action-tint);
	--plat-action-tint--4: var(--plat-action-tint);
	--plat-action-tint--5: var(--plat-action-tint);
	--plat-action-text--2: var(--plat-action-text);
	--plat-action-text--3: var(--plat-action-text);
	--plat-action-text--4: var(--plat-action-text);
	--plat-focus--2: var(--plat-focus);
	--plat-focus--3: var(--plat-focus);
	--plat-focus--4: var(--plat-focus);
	--plat-focus--5: var(--plat-focus);
	--plat-focus--6: var(--plat-focus);
	--plat-focus--7: var(--plat-focus);
	--plat-focus--8: var(--plat-focus);
	--plat-focus--9: var(--plat-focus);
	--plat-focus--10: var(--plat-focus);
	--plat-focus--11: var(--plat-focus);
	--plat-focus--12: var(--plat-focus);
	--plat-focus--13: var(--plat-focus);
	--plat-ok--2: var(--plat-ok);
	--plat-ok--3: var(--plat-ok);
	--plat-ok-tint--2: var(--plat-ok-tint);
	--plat-ok-tint--3: var(--plat-ok-tint);
	--plat-ok-tint--4: var(--plat-ok-tint);
	--plat-ok-tint--5: var(--plat-ok-tint);
	--plat-ok-text--2: var(--plat-ok-text);
	--plat-ok-text--3: var(--plat-ok-text);
	--plat-ok-text--4: var(--plat-ok-text);
	--plat-ok-text--5: var(--plat-ok-text);
	--plat-ok-text--6: var(--plat-ok-text);
	--plat-ok-text--7: var(--plat-ok-text);
	--plat-ok-text--8: var(--plat-ok-text);
	--plat-ok-border--2: var(--plat-ok-border);
	--plat-ok-border--3: var(--plat-ok-border);
	--plat-ok-border--4: var(--plat-ok-border);
	--plat-warn--2: var(--plat-warn);
	--plat-warn--3: var(--plat-warn);
	--plat-warn--4: var(--plat-warn);
	--plat-warn--5: var(--plat-warn);
	--plat-warn--6: var(--plat-warn);
	--plat-warn-tint--2: var(--plat-warn-tint);
	--plat-warn-tint--3: var(--plat-warn-tint);
	--plat-warn-tint--4: var(--plat-warn-tint);
	--plat-warn-tint--5: var(--plat-warn-tint);
	--plat-warn-tint--6: var(--plat-warn-tint);
	--plat-warn-tint--7: var(--plat-warn-tint);
	--plat-warn-tint--8: var(--plat-warn-tint);
	--plat-warn-text--2: var(--plat-warn-text);
	--plat-warn-text--3: var(--plat-warn-text);
	--plat-warn-border--2: var(--plat-warn-border);
	--plat-warn-border--3: var(--plat-warn-border);
	--plat-warn-border--4: var(--plat-warn-border);
	--plat-warn-border--5: var(--plat-warn-border);
	--plat-danger--2: var(--plat-danger);
	--plat-danger--3: var(--plat-danger);
	--plat-danger--4: var(--plat-danger);
	--plat-on-danger--2: var(--plat-on-danger);
	--plat-danger-tint--2: var(--plat-danger-tint);
	--plat-danger-tint--3: var(--plat-danger-tint);
	--plat-danger-tint--4: var(--plat-danger-tint);
	--plat-danger-tint--5: var(--plat-danger-tint);
	--plat-danger-tint--6: var(--plat-danger-tint);
	--plat-danger-tint--7: var(--plat-danger-tint);
	--plat-danger-text--2: var(--plat-danger-text);
	--plat-danger-text--3: var(--plat-danger-text);
	--plat-danger-text--4: var(--plat-danger-text);
	--plat-danger-text--5: var(--plat-danger-text);
	--plat-danger-text--6: var(--plat-danger-text);
	--plat-danger-border--2: var(--plat-danger-border);
	--plat-danger-border--3: var(--plat-danger-border);
	--plat-danger-border--4: var(--plat-danger-border);
	--plat-danger-border--5: var(--plat-danger-border);
	--plat-danger-border--6: var(--plat-danger-border);
	--plat-danger-border--7: var(--plat-danger-border);
	--plat-danger-border--8: var(--plat-danger-border);
	--plat-danger-border--9: var(--plat-danger-border);
	--plat-danger-border--10: var(--plat-danger-border);
	--plat-info--2: var(--plat-info);
	--plat-info--3: var(--plat-info);
	--plat-info-tint--2: var(--plat-info-tint);
	--plat-info-tint--3: var(--plat-info-tint);
	--plat-info-tint--4: var(--plat-info-tint);
	--plat-info-tint--5: var(--plat-info-tint);
	--plat-info-tint--6: var(--plat-info-tint);
	--plat-info-tint--7: var(--plat-info-tint);
	--plat-info-text--2: var(--plat-info-text);
	--plat-info-text--3: var(--plat-info-text);
	--plat-info-text--4: var(--plat-info-text);
	--plat-info-text--5: var(--plat-info-text);
	--plat-info-text--6: var(--plat-info-text);
	--plat-info-text--7: var(--plat-info-text);
	--plat-info-border--2: var(--plat-info-border);
	--plat-info-border--3: var(--plat-info-border);
	--plat-info-border--4: var(--plat-info-border);
	--plat-info-border--5: var(--plat-info-border);
	--plat-info-border--6: var(--plat-info-border);
	--plat-neutral-tint--2: var(--plat-neutral-tint);
	--plat-neutral-tint--3: var(--plat-neutral-tint);
	--plat-neutral-tint--4: var(--plat-neutral-tint);
	--plat-neutral-tint--5: var(--plat-neutral-tint);
	--plat-neutral-tint--6: var(--plat-neutral-tint);
	--plat-neutral-tint--7: var(--plat-neutral-tint);
	--plat-neutral-tint--8: var(--plat-neutral-tint);
	--plat-neutral-tint--9: var(--plat-neutral-tint);
	--plat-neutral-tint--10: var(--plat-neutral-tint);
	--plat-neutral-tint--11: var(--plat-neutral-tint);
	--plat-neutral-tint--12: var(--plat-neutral-tint);
	--plat-neutral-tint--13: var(--plat-neutral-tint);
	--plat-neutral-tint--14: var(--plat-neutral-tint);
	--plat-neutral-tint--15: var(--plat-neutral-tint);
	--plat-neutral-tint--16: var(--plat-neutral-tint);
	--plat-side-bg--2: var(--plat-side-bg);
	--plat-side-bg--3: var(--plat-side-bg);
	--plat-side-bg--4: var(--plat-side-bg);
	--plat-side-bg--5: var(--plat-side-bg);
	--plat-side-text--2: var(--plat-side-text);
	--plat-side-text--3: var(--plat-side-text);
	--plat-side-text--4: var(--plat-side-text);
	--plat-side-text--5: var(--plat-side-text);
	--plat-side-text-2--2: var(--plat-side-text-2);
	--plat-side-text-2--3: var(--plat-side-text-2);
	--plat-side-text-2--4: var(--plat-side-text-2);
	--plat-side-hover--2: var(--plat-side-hover);
	--plat-side-hover--3: var(--plat-side-hover);
	--plat-side-active-text--2: var(--plat-side-active-text);
	--plat-side-active-text--3: var(--plat-side-active-text);
	--plat-side-border--2: var(--plat-side-border);
	--plat-side-border--3: var(--plat-side-border);
	--plat-side-border--4: var(--plat-side-border);
	--plat-side-border--5: var(--plat-side-border);
	--plat-side-brand--2: var(--plat-side-brand);
	--plat-side-brand--3: var(--plat-side-brand);
	--plat-avatar-bg--2: var(--plat-avatar-bg);
	--plat-avatar-bg--3: var(--plat-avatar-bg);
	--plat-avatar-bg--4: var(--plat-avatar-bg);
	--plat-avatar-text--2: var(--plat-avatar-text);
	--plat-avatar-text--3: var(--plat-avatar-text);
	--plat-scrim--2: var(--plat-scrim);
	--plat-scrim--3: var(--plat-scrim);
	--plat-scrim--4: var(--plat-scrim);
	--plat-toast-bg--2: var(--plat-toast-bg);
	--plat-toast-bg--3: var(--plat-toast-bg);
	--plat-toast-bg--4: var(--plat-toast-bg);
	--plat-toast-bg--5: var(--plat-toast-bg);
	--plat-toast-text--2: var(--plat-toast-text);
	--plat-toast-text--3: var(--plat-toast-text);
	--plat-skel--2: var(--plat-skel);
	--plat-skel--3: var(--plat-skel);
	--plat-chart-slate: var(--plat-chart-1);
	--plat-layout-brand: var(--plat-danger);
	--plat-layout-brand--2: var(--plat-action-tint);
	--plat-layout-brand--3: var(--plat-side-active);
	--plat-layout-scrollbar: var(--plat-side-text-2);
	--plat-layout-scrollbar--2: var(--plat-side-bg);
	--plat-layout-scrollbar--3: var(--plat-side-bg);
	--plat-layout-scrollbar--4: transparent;
	--plat-layout-scrollbar--5: transparent;
}

/* Look 2, light (also the default when a page names no look) */
:root,
[data-bs-theme="light"],
[data-plat-look="2"][data-bs-theme="light"] {
	--plat-canvas: #F5F4F0;
	--plat-surface: #FFFFFF;
	--plat-raised: #FFFFFF;
	--plat-field: #FFFFFF;
	--plat-hover: #F1EFE9;
	--plat-pressed: #E8E5DD;
	--plat-thead: #F9F8F4;
	--plat-border: #E6E2DA;
	--plat-border-strong: #7D7A72;
	--plat-text: #17212B;
	--plat-text-2: #505A64;
	--plat-text-ph: #6A7380;
	--plat-text-dis: #9C9A94;
	--plat-link: #0B5F59;
	--plat-action: #0F766E;
	--plat-action-hover: #0B5F59;
	--plat-action-press: #094C47;
	--plat-on-action: #FFFFFF;
	--plat-action-tint: #DDF2EE;
	--plat-action-text: #0B5F59;
	--plat-focus: #0F766E;
	--plat-ok: #15803D;
	--plat-ok-tint: #DCFCE7;
	--plat-ok-text: #14532D;
	--plat-ok-border: #86EFAC;
	--plat-warn: #A85B00;
	--plat-warn-tint: #FEF0C7;
	--plat-warn-text: #6E4300;
	--plat-warn-border: #F5CB5C;
	--plat-danger: #C92A2A;
	--plat-danger-hover: #A61E1E;
	--plat-danger-press: #8A1818;
	--plat-on-danger: #FFFFFF;
	--plat-danger-tint: #FEE2E2;
	--plat-danger-text: #991B1B;
	--plat-danger-border: #FCA5A5;
	--plat-info: #0369A1;
	--plat-info-tint: #E0F2FE;
	--plat-info-text: #075985;
	--plat-info-border: #7DD3FC;
	--plat-neutral-tint: #ECE9E2;
	--plat-gold: #D4A62A;
	--plat-on-gold: #1C1505;
	--plat-gold-icon: #9A6B00;
	--plat-gold-tint: #FBF4DC;
	--plat-gold-text: #6B4E00;
	--plat-side-bg: #0B1F33;
	--plat-side-text: #C3D1DE;
	--plat-side-text-2: #8CA0B5;
	--plat-side-hover: rgba(255,255,255,.07);
	--plat-side-active: rgba(45,212,191,.14);
	--plat-side-active-text: #7FE3D4;
	--plat-side-marker: #2DD4BF;
	--plat-side-border: rgba(255,255,255,.08);
	--plat-side-brand: #FFFFFF;
	--plat-side-count: #D4A62A;
	--plat-side-count-text: #1C1505;
	--plat-topbar: rgba(245,244,240,.9);
	--plat-avatar-bg: #0F766E;
	--plat-avatar-text: #FFFFFF;
	--plat-ws-bg: #D4A62A;
	--plat-ws-text: #1C1505;
	--plat-scrim: rgba(11,31,51,.55);
	--plat-toast-bg: #0B1F33;
	--plat-toast-text: #FFFFFF;
	--plat-skel: #E9E6DF;
	--plat-skel-shine: #F6F4EF;
	--plat-auth-side: linear-gradient(165deg,#0B1F33 0%,#0F3B4C 55%,#0F766E 100%);
	--plat-chart-1: #0F766E;
	--plat-chart-2: #A16207;
	--plat-chart-3: #2457E6;
	--plat-chart-4: #7C3AED;
	--plat-chart-5: #DB2777;
	--plat-chart-6: #6B7280;
	--plat-icon-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2317212B'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	--plat-icon-select: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23505A64' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	--plat-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23505A64' d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.656a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E");
	--plat-sidebar-close-filter: invert(1);
	--plat-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
	--plat-shadow-md: 0 4px 12px -2px rgba(16, 24, 40, 0.12), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
	--plat-shadow-lg: 0 24px 48px -12px rgba(16, 24, 40, 0.28);
	--plat-shadow-action: 0 1px 2px rgba(0, 0, 0, 0.18);
	/* Brand images (plat_layout.css "Brand lockups"): which version shows, block or none. Red on dark #EB2F4F measures
	   4.0 : 1 on the navy sidebar and drawer (#0B1F33) and 3.8 : 1 or more where the side panel's lockup sits. */
	--plat-brand-side-light: none;
	--plat-brand-side-white: none;
	--plat-brand-side-red: none;
	--plat-brand-side-ondark: block;
	--plat-brand-bar-light: block;
	--plat-brand-bar-red: block;
	--plat-brand-bar-ondark: none;
	--plat-brand-card-light: block;
	--plat-brand-card-white: none;
	--plat-brand-card-ondark: none;
	--plat-brand-panel-ondark: block;
	--plat-brand-panel-white: none;
}

/* Look 2, dark */
[data-bs-theme="dark"],
[data-plat-look="2"][data-bs-theme="dark"] {
	--plat-canvas: #0B141C;
	--plat-surface: #121D27;
	--plat-raised: #182531;
	--plat-field: #0E171F;
	--plat-hover: #182531;
	--plat-pressed: #1F2E3C;
	--plat-thead: #15212C;
	--plat-border: #22303D;
	--plat-border-strong: #6A7A89;
	--plat-text: #E7EDF2;
	--plat-text-2: #A4B2C0;
	--plat-text-ph: #8E9CAB;
	--plat-text-dis: #5D6C7A;
	--plat-link: #7FE3D4;
	--plat-action: #2DD4BF;
	--plat-action-hover: #5EEAD4;
	--plat-action-press: #14B8A6;
	--plat-on-action: #06201C;
	--plat-action-tint: rgba(45,212,191,.14);
	--plat-action-text: #7FE3D4;
	--plat-focus: #5EEAD4;
	--plat-ok: #22C55E;
	--plat-ok-tint: rgba(34,197,94,.16);
	--plat-ok-text: #86EFAC;
	--plat-ok-border: rgba(34,197,94,.45);
	--plat-warn: #F0B429;
	--plat-warn-tint: rgba(240,180,41,.16);
	--plat-warn-text: #FCD667;
	--plat-warn-border: rgba(240,180,41,.45);
	--plat-danger: #F87171;
	--plat-danger-hover: #FCA5A5;
	--plat-danger-press: #EF5350;
	--plat-on-danger: #2A0A0A;
	--plat-danger-tint: rgba(248,113,113,.16);
	--plat-danger-text: #FCA5A5;
	--plat-danger-border: rgba(248,113,113,.45);
	--plat-info: #38BDF8;
	--plat-info-tint: rgba(56,189,248,.16);
	--plat-info-text: #7DD3FC;
	--plat-info-border: rgba(56,189,248,.45);
	--plat-neutral-tint: #1E2B37;
	--plat-gold: #E5BE4E;
	--plat-on-gold: #1C1505;
	--plat-gold-icon: #E5BE4E;
	--plat-gold-tint: rgba(229,190,78,.12);
	--plat-gold-text: #F0D27A;
	--plat-side-bg: #07131D;
	--plat-side-text: #B3C3D2;
	--plat-side-text-2: #8599AD;
	--plat-side-hover: rgba(255,255,255,.06);
	--plat-side-active: rgba(45,212,191,.14);
	--plat-side-active-text: #7FE3D4;
	--plat-side-marker: #2DD4BF;
	--plat-side-border: rgba(255,255,255,.06);
	--plat-side-brand: #FFFFFF;
	--plat-side-count: #E5BE4E;
	--plat-side-count-text: #1C1505;
	--plat-topbar: rgba(11,20,28,.88);
	--plat-avatar-bg: #2DD4BF;
	--plat-avatar-text: #06201C;
	--plat-ws-bg: #E5BE4E;
	--plat-ws-text: #1C1505;
	--plat-scrim: rgba(0,0,0,.65);
	--plat-toast-bg: #E7EDF2;
	--plat-toast-text: #0B141C;
	--plat-skel: #1C2A36;
	--plat-skel-shine: #273644;
	--plat-auth-side: linear-gradient(165deg,#07131D 0%,#0B2A3A 55%,#0F766E 100%);
	--plat-chart-1: #2DD4BF;
	--plat-chart-2: #E5BE4E;
	--plat-chart-3: #6B93FF;
	--plat-chart-4: #A78BFA;
	--plat-chart-5: #F472B6;
	--plat-chart-6: #9AA6B2;
	--plat-icon-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23E7EDF2'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	--plat-icon-select: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23A4B2C0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	--plat-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23A4B2C0' d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.656a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E");
	--plat-sidebar-close-filter: invert(1);
	--plat-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--plat-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--plat-border);
	--plat-shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--plat-border);
	--plat-shadow-action: none;
	/* Brand images (plat_layout.css "Brand lockups"): which version shows, block or none. Red on dark #EB2F4F measures
	   4.5 : 1 on the sidebar (#07131D) and top bar (#0B141C), 4.1 : 1 on the card (#121D27), 4.3 : 1 or more on the side panel. */
	--plat-brand-side-light: none;
	--plat-brand-side-white: none;
	--plat-brand-side-red: none;
	--plat-brand-side-ondark: block;
	--plat-brand-bar-light: none;
	--plat-brand-bar-red: none;
	--plat-brand-bar-ondark: block;
	--plat-brand-card-light: none;
	--plat-brand-card-white: none;
	--plat-brand-card-ondark: block;
	--plat-brand-panel-ondark: block;
	--plat-brand-panel-white: none;
}

/* Look 1, light */
[data-plat-look="1"],
:where([data-plat-look="1"]) [data-bs-theme="light"],
[data-plat-look="1"][data-bs-theme="light"] {
	--plat-canvas: #F4F6FA;
	--plat-surface: #FFFFFF;
	--plat-raised: #FFFFFF;
	--plat-field: #FFFFFF;
	--plat-hover: #EEF2F7;
	--plat-pressed: #E3E9F2;
	--plat-thead: #F9FAFC;
	--plat-border: #E3E8EF;
	--plat-border-strong: #7A8699;
	--plat-text: #111827;
	--plat-text-2: #4F5A6B;
	--plat-text-ph: #66718A;
	--plat-text-dis: #9AA3B2;
	--plat-link: #1D49C4;
	--plat-action: #2457E6;
	--plat-action-hover: #1D49C4;
	--plat-action-press: #173C9F;
	--plat-on-action: #FFFFFF;
	--plat-action-tint: #E9EFFF;
	--plat-action-text: #1D49C4;
	--plat-focus: #2457E6;
	--plat-ok: #15803D;
	--plat-ok-tint: #DCFCE7;
	--plat-ok-text: #14532D;
	--plat-ok-border: #86EFAC;
	--plat-warn: #A85B00;
	--plat-warn-tint: #FEF0C7;
	--plat-warn-text: #6E4300;
	--plat-warn-border: #F5CB5C;
	--plat-danger: #C92A2A;
	--plat-danger-hover: #A61E1E;
	--plat-danger-press: #8A1818;
	--plat-on-danger: #FFFFFF;
	--plat-danger-tint: #FEE2E2;
	--plat-danger-text: #991B1B;
	--plat-danger-border: #FCA5A5;
	--plat-info: #0369A1;
	--plat-info-tint: #E0F2FE;
	--plat-info-text: #075985;
	--plat-info-border: #7DD3FC;
	--plat-neutral-tint: #E9EDF3;
	--plat-gold: #D4A62A;
	--plat-on-gold: #1C1505;
	--plat-gold-icon: #9A6B00;
	--plat-gold-tint: #FBF4DC;
	--plat-gold-text: #6B4E00;
	--plat-side-bg: #FFFFFF;
	--plat-side-text: #3C4657;
	--plat-side-text-2: #5F6B7D;
	--plat-side-hover: #F1F4F9;
	--plat-side-active: #E9EFFF;
	--plat-side-active-text: #1D49C4;
	--plat-side-marker: #2457E6;
	--plat-side-border: #E3E8EF;
	--plat-side-brand: #111827;
	--plat-side-count: #2457E6;
	--plat-side-count-text: #FFFFFF;
	--plat-topbar: rgba(255,255,255,.88);
	--plat-avatar-bg: #2457E6;
	--plat-avatar-text: #FFFFFF;
	--plat-ws-bg: #111827;
	--plat-ws-text: #FFFFFF;
	--plat-scrim: rgba(17,24,39,.5);
	--plat-toast-bg: #111827;
	--plat-toast-text: #FFFFFF;
	--plat-skel: #E6EAF0;
	--plat-skel-shine: #F5F7FA;
	--plat-auth-side: linear-gradient(160deg,#17358F 0%,#2457E6 60%,#5B86F5 100%);
	--plat-chart-1: #2457E6;
	--plat-chart-2: #0F9F8F;
	--plat-chart-3: #B45309;
	--plat-chart-4: #7C3AED;
	--plat-chart-5: #DB2777;
	--plat-chart-6: #64748B;
	--plat-icon-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23111827'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	--plat-icon-select: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234F5A6B' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	--plat-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%234F5A6B' d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.656a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E");
	--plat-sidebar-close-filter: none;
	/* Brand images (plat_layout.css "Brand lockups"): which version shows, block or none. The side panel's blue (#19399A where
	   the lockup sits) gives red on dark only 2.3 : 1, so the panel shows the white lockup. */
	--plat-brand-side-light: block;
	--plat-brand-side-white: none;
	--plat-brand-side-red: block;
	--plat-brand-side-ondark: none;
	--plat-brand-bar-light: block;
	--plat-brand-bar-red: block;
	--plat-brand-bar-ondark: none;
	--plat-brand-card-light: block;
	--plat-brand-card-white: none;
	--plat-brand-card-ondark: none;
	--plat-brand-panel-ondark: none;
	--plat-brand-panel-white: block;
}

/* Look 1, dark */
:where([data-plat-look="1"]) [data-bs-theme="dark"],
[data-plat-look="1"][data-bs-theme="dark"] {
	--plat-canvas: #0E1218;
	--plat-surface: #151B24;
	--plat-raised: #1B2330;
	--plat-field: #111720;
	--plat-hover: #1C2430;
	--plat-pressed: #232D3B;
	--plat-thead: #171E29;
	--plat-border: #262F3C;
	--plat-border-strong: #6B7788;
	--plat-text: #E8ECF3;
	--plat-text-2: #A3AEC0;
	--plat-text-ph: #8E99AC;
	--plat-text-dis: #5F6B7D;
	--plat-link: #9DB8FF;
	--plat-action: #6B93FF;
	--plat-action-hover: #86A7FF;
	--plat-action-press: #5680F5;
	--plat-on-action: #0B1530;
	--plat-action-tint: rgba(107,147,255,.16);
	--plat-action-text: #9DB8FF;
	--plat-focus: #86A7FF;
	--plat-ok: #22C55E;
	--plat-ok-tint: rgba(34,197,94,.16);
	--plat-ok-text: #86EFAC;
	--plat-ok-border: rgba(34,197,94,.45);
	--plat-warn: #F0B429;
	--plat-warn-tint: rgba(240,180,41,.16);
	--plat-warn-text: #FCD667;
	--plat-warn-border: rgba(240,180,41,.45);
	--plat-danger: #F87171;
	--plat-danger-hover: #FCA5A5;
	--plat-danger-press: #EF5350;
	--plat-on-danger: #2A0A0A;
	--plat-danger-tint: rgba(248,113,113,.16);
	--plat-danger-text: #FCA5A5;
	--plat-danger-border: rgba(248,113,113,.45);
	--plat-info: #38BDF8;
	--plat-info-tint: rgba(56,189,248,.16);
	--plat-info-text: #7DD3FC;
	--plat-info-border: rgba(56,189,248,.45);
	--plat-neutral-tint: #232C39;
	--plat-gold: #E5BE4E;
	--plat-on-gold: #1C1505;
	--plat-gold-icon: #E5BE4E;
	--plat-gold-tint: rgba(229,190,78,.12);
	--plat-gold-text: #F0D27A;
	--plat-side-bg: #111720;
	--plat-side-text: #B6C0D0;
	--plat-side-text-2: #8792A5;
	--plat-side-hover: #1C2430;
	--plat-side-active: rgba(107,147,255,.16);
	--plat-side-active-text: #9DB8FF;
	--plat-side-marker: #6B93FF;
	--plat-side-border: #262F3C;
	--plat-side-brand: #F2F5FA;
	--plat-side-count: #6B93FF;
	--plat-side-count-text: #0B1530;
	--plat-topbar: rgba(14,18,24,.86);
	--plat-avatar-bg: #6B93FF;
	--plat-avatar-text: #0B1530;
	--plat-ws-bg: #E8ECF3;
	--plat-ws-text: #111827;
	--plat-scrim: rgba(0,0,0,.65);
	--plat-toast-bg: #E8ECF3;
	--plat-toast-text: #111827;
	--plat-skel: #1F2834;
	--plat-skel-shine: #2A3442;
	--plat-auth-side: linear-gradient(160deg,#0B1530 0%,#17358F 60%,#2457E6 100%);
	--plat-chart-1: #6B93FF;
	--plat-chart-2: #2DD4BF;
	--plat-chart-3: #F0B429;
	--plat-chart-4: #A78BFA;
	--plat-chart-5: #F472B6;
	--plat-chart-6: #94A3B8;
	--plat-icon-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23E8ECF3'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	--plat-icon-select: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23A3AEC0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	--plat-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23A3AEC0' d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.656a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E");
	--plat-sidebar-close-filter: invert(1);
	/* Brand images (plat_layout.css "Brand lockups"): which version shows, block or none. Red on dark #EB2F4F measures
	   4.3 : 1 on the sidebar (#111720), 4.5 : 1 on the top bar (#0E1218), 4.2 : 1 on the card (#151B24), 4.0 : 1 or more on the side panel. */
	--plat-brand-side-light: none;
	--plat-brand-side-white: none;
	--plat-brand-side-red: none;
	--plat-brand-side-ondark: block;
	--plat-brand-bar-light: none;
	--plat-brand-bar-red: none;
	--plat-brand-bar-ondark: block;
	--plat-brand-card-light: none;
	--plat-brand-card-white: none;
	--plat-brand-card-ondark: block;
	--plat-brand-panel-ondark: block;
	--plat-brand-panel-white: none;
}

/* Control sizes (K-b §C). Touch values are the default; compact values only with a mouse on a screen 900 px or wider. */
:root {
	--plat-h-btn: 44px;
	--plat-h-btn-sm: 44px;
	--plat-h-icon-btn: 44px;
	--plat-h-field: 44px;
	--plat-h-textarea: 96px;
	--plat-h-check: 22px;
	--plat-h-check-row: 44px;
	--plat-h-switch-w: 44px;
	--plat-h-switch: 26px;
	--plat-h-switch-knob: 22px;
	--plat-h-chip: 44px;
	--plat-h-tab: 48px;
	--plat-h-seg: 44px;
	--plat-h-side-item: 44px;
	--plat-h-menu-item: 44px;
	--plat-h-pager: 44px;
	--plat-h-thead: 44px;
	--plat-h-row: 52px;
	--plat-h-card-row: 64px;
	--plat-h-dismiss: 44px;
	--plat-h-step: 44px;
	--plat-h-info: 44px;
	--plat-h-link: 44px;
	--plat-h-avatar-btn: 44px;
	--plat-h-toggle: 44px;
	--plat-avatar-btn-circle: 36px;
	--plat-pad-btn: 16px;
	--plat-pad-btn-sm: 16px;
	--plat-pad-chip: 14px;
	--plat-fs-btn: 14px;
	--plat-fs-field: 14px;
	--plat-lh-field: 20px;
	--plat-avatar-pair-text: #FFFFFF;
	--plat-avatar-pair-2-text: #FFFFFF;
}

@media (max-width: 599.98px) {
	:root {
		--plat-fs-btn: 15px;
		--plat-fs-field: 16px;
		--plat-lh-field: 24px;
	}
}

@media (pointer: fine) and (min-width: 900px) and (not (any-pointer: coarse)) {
	:root {
		--plat-h-btn: 40px;
		--plat-h-btn-sm: 32px;
		--plat-h-icon-btn: 36px;
		--plat-h-field: 40px;
		--plat-h-textarea: 88px;
		--plat-h-check: 18px;
		--plat-h-check-row: 32px;
		--plat-h-switch-w: 36px;
		--plat-h-switch: 20px;
		--plat-h-switch-knob: 16px;
		--plat-h-chip: 32px;
		--plat-h-tab: 44px;
		--plat-h-seg: 36px;
		--plat-h-side-item: 40px;
		--plat-h-menu-item: 36px;
		--plat-h-pager: 36px;
		--plat-h-thead: 40px;
		--plat-h-dismiss: 36px;
		--plat-h-step: 40px;
		--plat-h-info: 32px;
		--plat-h-link: 32px;
		--plat-h-avatar-btn: 40px;
		--plat-h-toggle: 24px;
		--plat-avatar-btn-circle: 32px;
		--plat-pad-btn: 14px;
		--plat-pad-btn-sm: 10px;
		--plat-pad-chip: 12px;
	}
}

/* Avatar initials on the six colour pairs (K-b §G5). Pair 2 in Look 1 light takes dark initials (white is 3.3 : 1 there). */
:root[data-plat-look="1"] {
	--plat-avatar-pair-2-text: #0B1530;
}

[data-bs-theme="dark"] {
	--plat-avatar-pair-text: #0B1530;
	--plat-avatar-pair-2-text: #0B1530;
}

/* ── T-kit-frame-2 S2 — toast icon and action colours (K-b §D12). The toast is dark in light mode and light in dark mode, so it takes the other mode's solid colours. ── */
:root {
	--plat-toast-ok: #22C55E;
	--plat-toast-warn: #F0B429;
	--plat-toast-danger: #F87171;
	--plat-toast-info: #38BDF8;
	--plat-toast-action: #7FE3D4;
}

:root[data-plat-look="1"] {
	--plat-toast-action: #9DB8FF;
}

:root[data-bs-theme="dark"] {
	--plat-toast-ok: #15803D;
	--plat-toast-warn: #A85B00;
	--plat-toast-danger: #C92A2A;
	--plat-toast-info: #0369A1;
	--plat-toast-action: #0B5F59;
}

:root[data-plat-look="1"][data-bs-theme="dark"] {
	--plat-toast-action: #1D49C4;
}
/* ── T-kit-frame-2 S2 tokens — end ── */

/* ── T-kit-frame-2 S3 — sign-in left half (K-b §E): white words on the auth-side gradient; the mark has no tile. ── */
:root {
	--plat-auth-side-text: #FFFFFF;
	--plat-auth-tick-bg: rgba(255, 255, 255, 0.2);
	--plat-auth-side-shade: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) 160px);
}

/* ── T-kit-frame-2 S3 tokens — end ── */