/**
 * Copyright © WebbyTroops Technologies. All rights reserved.
 *
 * The token layer every other Case Studies stylesheet consumes.
 *
 * Blocksy's variables come *first* here, deliberately. The stylesheet this
 * replaced put --wp--preset--* first, which on this site silently ran on the
 * hardcoded fallbacks: Blocksy ships "color": { "palette": [] } and no
 * spacingSizes, so none of those presets are defined. WP presets stay in the middle
 * so the same CSS still works on a block theme.
 *
 * Every rule elsewhere uses --wt-cs-*, which also makes each one overridable from a
 * single Elementor control.
 */

.wt-cs-scope {
	--wt-cs-color-heading: var(--theme-headings-color, var(--wp--preset--color--contrast, #14171c));
	--wt-cs-color-text: var(--theme-text-color, var(--wp--preset--color--accent-4, #5b6472));
	--wt-cs-color-base: var(--theme-palette-color-8, var(--wp--preset--color--base, #fff));
	--wt-cs-color-accent: var(--theme-palette-color-1, #2f6bff);
	--wt-cs-color-border: var(--theme-border-color, rgba(20, 23, 28, 0.12));
	--wt-cs-color-surface: var(--theme-palette-color-7, #f6f7f9);

	--wt-cs-radius: var(--theme-button-border-radius, 14px);
	--wt-cs-radius-sm: 8px;

	--wt-cs-space-xs: 8px;
	--wt-cs-space-sm: 12px;
	--wt-cs-space-md: 24px;
	--wt-cs-space-lg: clamp(28px, 4vw, 48px);

	--wt-cs-transition: 160ms ease;
}

.wt-cs-scope,
.wt-cs-scope *,
.wt-cs-scope *::before,
.wt-cs-scope *::after {
	box-sizing: border-box;
}

/* Focus ring shared by every interactive element the plugin renders. */
.wt-cs-scope :where(a, button, select):focus-visible {
	outline: 2px solid var(--wt-cs-color-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

	.wt-cs-scope,
	.wt-cs-scope * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}