/**
 * Smash Balloon design tokens — Social Wall local mirror.
 *
 * Single source of truth for design tokens used by Social Wall surfaces
 * (frontend feed renderer + React admin builder).
 * Mirrored verbatim from `@smashballoons/tokens` v0.4.0 (npm), keeping
 * parity with the canonical Instagram Feed Pro port landed under
 * SMASH-1378 (see `instagram-feed-pro/assets/tokens/sb-tokens-local.css`),
 * the Facebook Pro cascade port
 * (`custom-facebook-feed-pro/assets/tokens/cff-tokens-local.css`) and the
 * Twitter Pro port (`custom-twitter-feeds-pro/assets/tokens/ctf-tokens-local.css`).
 *
 * Future migration: when sb-common centralizes token distribution, the
 * `Package mirror` block can be replaced with an @import / wp_enqueue
 * of the official package without breaking the alias contract below.
 *
 * Mirror version: @smashballoons/tokens@0.4.0
 * Slice scope:    fg + focus + opacity-disabled + duration (semantic
 *                 layer required by SMASH-1378 a11y PRs). Extend in
 *                 follow-up PRs as new tokens (border, bg, motion) are
 *                 adopted.
 */

:root {
	/* ===== Package mirror — @smashballoons/tokens@0.4.0 ===== */

	/* Color primitives referenced by the semantic layer below. */
	--sb-color-gray-600: #4a5565;
	--sb-color-gray-700: #364153;
	--sb-color-wp-light-blue-600: #007ca8;

	/* Duration primitives — referenced directly by consumer transitions
	   and overridden by the reduced-motion @media block below. */
	--sb-duration-75:   75ms;
	--sb-duration-100:  100ms;
	--sb-duration-150:  150ms;
	--sb-duration-200:  200ms;
	--sb-duration-300:  300ms;
	--sb-duration-500:  500ms;
	--sb-duration-700:  700ms;
	--sb-duration-1000: 1000ms;

	/* Opacity */
	--sb-opacity-disabled: 0.5;

	/* Semantic foreground */
	--sb-fg-muted:  var(--sb-color-gray-700);
	--sb-fg-subtle: var(--sb-color-gray-600);

	/* Semantic focus */
	--sb-focus-ring: var(--sb-color-wp-light-blue-600);

	/* ===== Plugin-local aliases (stable consumer-site names) =====
	   Bump the package values above; consumers reference these aliases
	   and do not need to be renamed. Drop an alias here when a follow-up
	   PR migrates its usage sites to the package name directly. */
	--sw-text-secondary: var(--sb-fg-muted);
	--sw-text-tertiary:  var(--sb-fg-subtle);
}

/* Reduced-motion override — zeroes every duration token so any consumer
   transition that uses `var(--sb-duration-*)` inherits the override
   automatically. Transforms / @keyframes still need an explicit
   `prefers-reduced-motion: no-preference` wrap at the consumer site. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--sb-duration-75:   0.01ms;
		--sb-duration-100:  0.01ms;
		--sb-duration-150:  0.01ms;
		--sb-duration-200:  0.01ms;
		--sb-duration-300:  0.01ms;
		--sb-duration-500:  0.01ms;
		--sb-duration-700:  0.01ms;
		--sb-duration-1000: 0.01ms;
	}
}

/* ===== Global :focus-visible ring =====
   Social Wall shipped ZERO :focus-visible rules (P6b structural gap) and
   several `outline:none`/`outline:0` resets on the frontend feed + admin.
   This restores a visible, token-driven focus indicator across the three
   live surfaces:
     - frontend feed container: [id^=sb-wall]
     - React admin mount + body slug
   `:where()` keeps specificity at 0 so existing component focus styles
   can still override; the ring loses to nothing it should win against. */
:where([id^=sb-wall]) :focus-visible,
:where(#sbsw-app) :focus-visible,
:where(body[class*="social-wall"]) :focus-visible,
:where(body[class*="page_sbsw"]) :focus-visible {
	outline: 2px solid var(--sb-focus-ring);
	outline-offset: 2px;
}

/* Programmatic focus targets (view/step-change headings, tabindex="-1")
   are not interactive — suppress the ring some engines paint on them
   after keyboard-driven navigation. Interactive controls are unaffected. */
:where(#sbsw-app) :is(h1, h2, h3, h4, h5, h6)[tabindex="-1"]:focus {
	outline: none;
}