/**
 * Ritodocs design tokens — CSS custom properties, prefixed to avoid
 * colliding with theme or other plugins' variables. Shared by the
 * admin, the manager, blocks, and the front end so every surface reads
 * from one source of truth.
 */
:root {
	--ritodocs-paper: #FFFFFF;
	--ritodocs-paper-2: #F7F7F9;
	--ritodocs-paper-3: #EFEFF3;
	--ritodocs-canvas: #F2F2F5;

	--ritodocs-ink: #101114;
	--ritodocs-ink-2: #3C3E47;
	--ritodocs-ink-3: #6B6C76;
	--ritodocs-ink-4: #9A9BA4;

	--ritodocs-line: #E4E4EA;
	--ritodocs-line-strong: #D3D3DB;

	--ritodocs-accent: #3A2FE8;
	--ritodocs-accent-hover: #2C22C4;
	--ritodocs-accent-soft: #EEEDFE;
	--ritodocs-accent-line: #C9C5FA;

	--ritodocs-tab-saffron: #E0912B;
	--ritodocs-tab-coral: #E0553E;
	--ritodocs-tab-jade: #12996E;
	--ritodocs-tab-ultra: #3A2FE8;
	--ritodocs-tab-violet: #7C3EE0;
	--ritodocs-tab-slate: #5A6270;

	--ritodocs-ok: #12996E;
	--ritodocs-ok-soft: #E6F6F0;
	--ritodocs-warn: #B26A05;
	--ritodocs-warn-soft: #FDF3E2;
	--ritodocs-danger: #C2392B;
	--ritodocs-danger-soft: #FCEDEB;

	/* Front-end-only surface: a very quiet accent wash for hero/mesh
	   backgrounds, kept separate from --ritodocs-accent-soft (which is
	   tuned for solid chip/badge fills, not large washes). */
	--ritodocs-accent-wash: color-mix( in oklab, var( --ritodocs-accent ) 6%, white );

	--ritodocs-r-xs: 4px;
	--ritodocs-r-sm: 6px;
	--ritodocs-r-md: 8px;
	--ritodocs-r-lg: 12px;
	--ritodocs-r-xl: 16px;
	--ritodocs-r-full: 999px;

	--ritodocs-font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--ritodocs-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	--ritodocs-fast: 120ms cubic-bezier(0.2, 0, 0, 1);
	--ritodocs-base: 180ms cubic-bezier(0.2, 0, 0, 1);
	--ritodocs-slow: 240ms cubic-bezier(0.2, 0, 0, 1);

	/* Elevation — kept subtle; wp-admin already has its own chrome, so
	   these should read as "lifted card", not "floating over the OS". */
	--ritodocs-shadow-xs: 0 1px 2px rgba(16, 17, 20, 0.04);
	--ritodocs-shadow-sm: 0 1px 2px rgba(16, 17, 20, 0.05), 0 1px 1px rgba(16, 17, 20, 0.04);
	--ritodocs-shadow-md: 0 4px 12px rgba(16, 17, 20, 0.08), 0 1px 2px rgba(16, 17, 20, 0.04);
	--ritodocs-shadow-lg: 0 12px 32px rgba(16, 17, 20, 0.14), 0 2px 6px rgba(16, 17, 20, 0.06);
	--ritodocs-shadow-focus: 0 0 0 3px var( --ritodocs-accent-soft );

	/* Layered surfaces — dropdowns sit above the manager, modals above
	   dropdowns, toasts above everything (including a modal, so a save
	   error is never hidden behind the dialog that triggered it). */
	--ritodocs-z-dropdown: 60;
	--ritodocs-z-modal: 100;
	--ritodocs-z-toast: 200;

	/* Front-end layout — single source of truth for spacing that has to
	   line up across independently-rendered components (site header,
	   docs grid, portal home, library). Defined once here so a change
	   never requires hunting down duplicated numbers per component. */
	--ritodocs-gutter: clamp( 16px, 4vw, 28px );
	--ritodocs-header-h: 61px;

	/* Mobile off-canvas nav drawer — layered between the sticky header
	   and dropdowns so it always sits above page chrome but never
	   fights the search results panel or a modal. */
	--ritodocs-z-header: 40;
	--ritodocs-z-backdrop: 45;
	--ritodocs-z-drawer: 50;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--ritodocs-fast: 0ms;
		--ritodocs-base: 0ms;
	}
}