/*
	Theme Name: Deadly Threads
	Theme URI: http://deadly-threads-website.local
	Description: Child theme of Hello Elementor for the Deadly Threads WooCommerce store.
	Author: BlueQuill Digital Solutions
	Template: hello-elementor
	Version: 0.1.0
	Requires at least: 6.0
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: deadly-threads
*/

/*
 * Colours and typography live in the Elementor Kit (--e-global-color-*, --e-global-typography-*).
 * This file only holds tokens Elementor has no global for: spacing, radii, motion.
 * Section styles go in assets/css/.
 */
:root {
	/* Spacing scale (design-system 2:2032) */
	--dt-space-4: 4px;
	--dt-space-8: 8px;
	--dt-space-12: 12px;
	--dt-space-16: 16px;
	--dt-space-24: 24px;
	--dt-space-32: 32px;
	--dt-space-48: 48px;
	--dt-space-64: 64px;
	--dt-space-80: 80px;
	--dt-space-120: 120px;

	/* Radii */
	--dt-radius-badge: 4px;
	--dt-radius-button: 6px;
	--dt-radius-field: 8px;
	--dt-radius-card: 16px;

	/* Motion (design-system "DT HANDOFF — 03") */
	--dt-dur-micro: 160ms;
	--dt-dur-ui: 240ms;
	--dt-dur-overlay: 320ms;
	--dt-dur-reveal: 480ms;
	--dt-ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
	--dt-ease-ui: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dt-dur-micro: 0ms;
		--dt-dur-ui: 0ms;
		--dt-dur-overlay: 0ms;
		--dt-dur-reveal: 0ms;
	}
}

/* Buttons: colour transitions + primary lift/press (spec §0). */
.elementor-button {
	transition: background-color var(--dt-dur-micro) var(--dt-ease-ui), border-color var(--dt-dur-micro) var(--dt-ease-ui), color var(--dt-dur-micro) var(--dt-ease-ui), transform 100ms var(--dt-ease-ui);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.elementor-button:hover { transform: translateY(-2px); }
	.elementor-button:active { transform: translateY(1px); }
}

/* Visible focus (WCAG 2.2 AA). */
:where(a, button, input, select, textarea, .elementor-button):focus-visible {
	outline: 2px solid var(--e-global-color-secondary, #c4f23a);
	outline-offset: 2px;
}
