/**
 * tokens.css
 * ---------------------------------------------------------------------------
 * The single place to change global visual primitives that are not already
 * exposed by theme.json. theme.json generates --wp--preset--* variables for
 * colors, fonts, spacing and font sizes; this file layers on the semantic
 * aliases, radii, shadows, borders and motion that the components consume.
 *
 * Change a value here and it propagates everywhere. Do not hard-code these
 * values in components.css / blocks.css — always reference the var().
 */

:root {
	/* -- Semantic color aliases (map brand tokens to roles) ---------------- */
	--bb-ink: var(--wp--preset--color--blackbird);
	--bb-ink-muted: var(--wp--preset--color--ink-muted);
	--bb-surface: var(--wp--preset--color--white);
	--bb-surface-alt: var(--wp--preset--color--grey-light);
	--bb-surface-inverse: var(--wp--preset--color--blackbird);
	--bb-accent: var(--wp--preset--color--canary);
	--bb-accent-soft: var(--wp--preset--color--canary-soft);
	--bb-text: var(--wp--preset--color--blackbird);
	--bb-text-muted: var(--wp--preset--color--grey-brown);
	--bb-text-subtle: var(--wp--preset--color--grey-slate);
	--bb-text-inverse: var(--wp--preset--color--white);
	--bb-line: var(--wp--preset--color--grey-mid);
	--bb-line-strong: var(--wp--preset--color--grey-slate);

	/* -- Workflow-stage & category accents (used by diagrams and badges) --- */
	--bb-stage-build: var(--wp--preset--color--grape);
	--bb-stage-collect: var(--wp--preset--color--river-blue);
	--bb-stage-understand: var(--wp--preset--color--blueberry);
	--bb-stage-validate: var(--wp--preset--color--orange);
	--bb-stage-approve: var(--wp--preset--color--berry);
	--bb-stage-deliver: var(--wp--preset--color--green);

	/* -- Status semantics (never color-only; paired with text/icon) -------- */
	--bb-status-new: var(--wp--preset--color--green);
	--bb-status-updated: var(--wp--preset--color--river-blue);
	--bb-status-soon: var(--wp--preset--color--orange);
	--bb-status-live: var(--wp--preset--color--green);
	--bb-status-error: var(--wp--preset--color--berry);

	/* -- Radii ------------------------------------------------------------- */
	--bb-radius-sm: 6px;
	--bb-radius-md: 12px;
	--bb-radius-lg: 20px;
	--bb-radius-xl: 28px;
	--bb-radius-pill: 999px;

	/* -- Shadows ----------------------------------------------------------- */
	--bb-shadow-sm: 0 1px 2px rgba(28, 27, 23, 0.06);
	--bb-shadow-md: 0 6px 24px rgba(28, 27, 23, 0.08);
	--bb-shadow-lg: 0 20px 60px rgba(28, 27, 23, 0.12);

	/* -- Borders ----------------------------------------------------------- */
	--bb-border: 1px solid var(--bb-line);
	--bb-border-strong: 1.5px solid var(--bb-ink);

	/* -- Motion (respect prefers-reduced-motion below) --------------------- */
	--bb-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--bb-transition: 180ms var(--bb-ease);
	--bb-transition-slow: 320ms var(--bb-ease);

	/* -- Layout ------------------------------------------------------------ */
	--bb-header-height: 72px;
	--bb-content: 760px;
	--bb-wide: 1200px;
	--bb-max: 1440px;

	/* -- Focus ring -------------------------------------------------------- */
	--bb-focus: 0 0 0 3px var(--wp--preset--color--river-blue);
	--bb-focus-on-dark: 0 0 0 3px var(--wp--preset--color--canary);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--bb-transition: 0ms;
		--bb-transition-slow: 0ms;
	}
}