/**
 * StepDecor Design Tokens
 *
 * Single source of truth for every color, type, spacing, radius, shadow,
 * and motion value used across the theme and its Elementor widgets.
 * Values are re-declared as PHP defaults in inc/theme-options/class-default-options.php
 * and rendered here (or overridden) by inc/dynamic-css/class-dynamic-css.php.
 *
 * Never hardcode a color/spacing/shadow value in a component file.
 * Always consume a var(--sd-*) token instead.
 */

:root {
	/* Brand color ramp */
	--sd-color-primary: #0A8A91;
	--sd-color-primary-light: #0fb5be;
	--sd-color-accent: #F58220;
	--sd-gradient-brand: linear-gradient(135deg, var(--sd-color-primary), var(--sd-color-accent));

	/* Surface & text (light mode defaults) */
	--sd-color-bg: #F8F8F6;
	--sd-color-bg-alt: #EDEDEB;
	--sd-color-surface: #FFFFFF;
	--sd-color-surface-dark: #1B1B1B;
	--sd-color-text: #1B1B1B;
	--sd-color-text-muted: #555555;
	--sd-color-text-faint: #999999;
	--sd-color-border: rgba(0, 0, 0, 0.07);
	--sd-color-border-strong: rgba(0, 0, 0, 0.12);
	--sd-color-nav-bg: rgba(12, 12, 12, 0.94);

	/* Elevation */
	--sd-shadow-sm: 0 4px 24px rgba(0, 0, 0, .07);
	--sd-shadow-lg: 0 20px 64px rgba(0, 0, 0, .1);

	/* Typography */
	--sd-font-heading: 'Cormorant Garamond', serif;
	--sd-font-body: 'Inter', sans-serif;
	--sd-font-bn: 'Noto Serif Bengali', serif;

	/* Layout */
	--sd-container-width: 1280px;
	--sd-container-gutter: 5%;
	--sd-radius-sm: 2px;
	--sd-radius-md: 4px;
	--sd-radius-lg: 8px;
	--sd-radius-pill: 100px;

	/* Spacing scale (4px base) */
	--sd-space-1: 0.25rem;
	--sd-space-2: 0.5rem;
	--sd-space-3: 0.75rem;
	--sd-space-4: 1rem;
	--sd-space-5: 1.5rem;
	--sd-space-6: 2rem;
	--sd-space-8: 3rem;
	--sd-space-10: 4rem;
	--sd-space-12: 5rem;

	/* Motion */
	--sd-transition-fast: .3s ease;
	--sd-transition-med: .4s ease;
	--sd-transition-slow: .8s ease;
	--sd-ease-reveal: cubic-bezier(.16, 1, .3, 1);

	/* Z-index scale */
	--sd-z-nav: 1000;
	--sd-z-mobile-nav: 998;
	--sd-z-lightbox: 2000;
	--sd-z-sticky-cta: 900;
}

/**
 * Dark mode: attribute-driven (data-theme="dark") rather than only
 * prefers-color-scheme, so the theme-options "Enable / Disable / Auto"
 * setting can force either mode regardless of OS preference.
 */
[data-theme="dark"] {
	--sd-color-bg: #0d0d0d;
	--sd-color-bg-alt: #141414;
	--sd-color-surface: #1c1c1c;
	--sd-color-surface-dark: #0d0d0d;
	--sd-color-text: #F0F0EE;
	--sd-color-text-muted: #A0A0A0;
	--sd-color-text-faint: #666666;
	--sd-color-border: rgba(255, 255, 255, .07);
	--sd-color-border-strong: rgba(255, 255, 255, .12);
	--sd-shadow-sm: 0 4px 24px rgba(0, 0, 0, .4);
	--sd-shadow-lg: 0 20px 64px rgba(0, 0, 0, .5);
	--sd-color-nav-bg: rgba(5, 5, 5, .97);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--sd-transition-fast: 0s;
		--sd-transition-med: 0s;
		--sd-transition-slow: 0s;
	}
}