/*
 * Design tokens — docs/DESIGN_SYSTEM.md §4. Color/typography live in
 * theme.json (WP-native, editor-integrated); everything theme.json's
 * settings API doesn't expose as a plain custom property lives here.
 * No page-level CSS should introduce an arbitrary value not listed here.
 */
:root {
	/* Semantic color aliases (mirror theme.json palette, easier to use in
	   plain CSS outside block contexts, e.g. Compatibility Result states) */
	--ci-color-bg: var(--wp--preset--color--background);
	--ci-color-bg-subtle: var(--wp--preset--color--background-subtle);
	--ci-color-fg: var(--wp--preset--color--foreground);
	--ci-color-fg-muted: var(--wp--preset--color--muted);
	--ci-color-border: var(--wp--preset--color--border);
	--ci-color-accent: var(--wp--preset--color--accent);
	--ci-color-accent-fg: #ffffff;
	--ci-color-success: var(--wp--preset--color--success);
	--ci-color-success-bg: var(--wp--preset--color--success-bg);
	--ci-color-warning: var(--wp--preset--color--warning);
	--ci-color-warning-bg: var(--wp--preset--color--warning-bg);
	--ci-color-danger: var(--wp--preset--color--danger);
	--ci-color-danger-bg: var(--wp--preset--color--danger-bg);
	--ci-color-neutral: var(--wp--preset--color--neutral);
	--ci-color-neutral-bg: var(--wp--preset--color--neutral-bg);

	/* Phase 7I: display typeface, headings/hero/signature moments only.
	   docs/DESIGN_SYSTEM.md §2 — body/mono are unchanged system stacks. */
	--ci-font-display: var(--wp--preset--font-family--display);

	/* Spacing — base 4px */
	--ci-space-1: 0.25rem;
	--ci-space-2: 0.5rem;
	--ci-space-3: 0.75rem;
	--ci-space-4: 1rem;
	--ci-space-6: 1.5rem;
	--ci-space-8: 2rem;
	--ci-space-12: 3rem;
	--ci-space-16: 4rem;

	/* Radii */
	--ci-radius-sm: 6px;
	--ci-radius-md: 10px;
	--ci-radius-lg: 16px;
	--ci-radius-full: 999px;

	/* Borders */
	--ci-border-width: 1px;

	/* Surfaces / shadows */
	--ci-shadow-sm: 0 1px 2px rgba(15, 17, 21, 0.06);
	--ci-shadow-md: 0 4px 12px rgba(15, 17, 21, 0.08);

	/* Focus — rgb(168, 70, 10) = #a8460a, the accent token in rgba() form
	   (Phase 7I: was rgba(26, 86, 219, ...) matching the old blue accent).
	   Alpha raised 0.35 -> 0.8 (WCAG 2.2 audit, Phase 10 gate): at 0.35 the
	   ring composited over #ffffff measured ~1.7:1, failing SC 2.4.11 Focus
	   Appearance / 1.4.11 Non-text Contrast (need >=3:1). 0.8 measures ~4:1
	   against both --ci-color-bg and --ci-color-bg-subtle. */
	--ci-focus-ring: 0 0 0 3px rgba(168, 70, 10, 0.8);

	/* Transitions */
	--ci-transition-fast: 120ms ease;
	--ci-transition-base: 200ms ease;

	/* Breakpoints (reference values for CSS authors; not directly usable
	   inside @media, kept here so the numbers live in one place) */
	--ci-bp-sm: 480px;
	--ci-bp-md: 768px;
	--ci-bp-lg: 1024px;

	/* Content width */
	--ci-content-width: 720px;
	--ci-wide-width: 1080px;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--ci-transition-fast: 0ms;
		--ci-transition-base: 0ms;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Global focus visibility — never `outline: none` without this. */
:focus-visible {
	outline: none;
	box-shadow: var(--ci-focus-ring);
	border-radius: var(--ci-radius-sm);
}