/**
 * Intimacy Insight — Design Tokens
 * --------------------------------------------------------------------
 * Single source of truth for the entire visual design system.
 * Mirrors the palette/typography/spacing defined in theme.json so the
 * Block Editor, Elementor Global Style Kit, and classic PHP templates
 * all reference the exact same values. NEVER hardcode a color, spacing
 * value, radius, or shadow anywhere else in the theme — always consume
 * one of these custom properties.
 *
 * This file is intentionally tiny and loads on every page (it contains
 * only variable declarations, no selectors), so it has near-zero
 * performance cost while preventing style drift.
 */

:root {

	/* ----------------------------------------------------------------
	 * 1. COLORS
	 * ---------------------------------------------------------------- */
	--ii-color-primary: #0D9488;
	--ii-color-primary-dark: #0F766E;
	--ii-color-primary-light: #CCFBF1;
	--ii-color-secondary: #1E3A8A;
	--ii-color-accent: #F97316;

	--ii-color-text-primary: #0F172A;
	--ii-color-text-secondary: #475569;
	--ii-color-text-muted: #94A3B8;
	--ii-color-text-on-primary: #FFFFFF;

	--ii-color-bg: #FFFFFF;
	--ii-color-bg-alt: #F8FAFC;
	--ii-color-border: #E2E8F0;

	--ii-color-success: #22C55E;
	--ii-color-warning: #F59E0B;
	--ii-color-error: #EF4444;

	/* Per-content-pillar accents (Health vs Business), can be overridden
	   per-category via ACF term color field at render time. */
	--ii-color-health-accent: #0D9488;
	--ii-color-business-accent: #1E3A8A;

	/* ----------------------------------------------------------------
	 * 2. TYPOGRAPHY
	 * ---------------------------------------------------------------- */
	--ii-font-heading: 'Sora', 'Segoe UI', sans-serif;
	--ii-font-body: 'Inter', 'Segoe UI', sans-serif;
	--ii-font-mono: 'JetBrains Mono', ui-monospace, monospace;

	--ii-text-xs: 0.75rem;
	--ii-text-sm: 0.875rem;
	--ii-text-base: 1rem;
	--ii-text-lg: 1.125rem;
	--ii-text-xl: 1.25rem;
	--ii-text-2xl: 1.563rem;
	--ii-text-3xl: 1.953rem;
	--ii-text-4xl: 2.441rem;
	--ii-text-5xl: 3.052rem;

	--ii-leading-tight: 1.2;
	--ii-leading-normal: 1.5;
	--ii-leading-relaxed: 1.75;

	--ii-weight-regular: 400;
	--ii-weight-medium: 500;
	--ii-weight-semibold: 600;
	--ii-weight-bold: 700;

	/* ----------------------------------------------------------------
	 * 3. SPACING SCALE (8px base unit)
	 * ---------------------------------------------------------------- */
	--ii-space-1: 4px;
	--ii-space-2: 8px;
	--ii-space-3: 12px;
	--ii-space-4: 16px;
	--ii-space-5: 24px;
	--ii-space-6: 32px;
	--ii-space-7: 48px;
	--ii-space-8: 64px;
	--ii-space-9: 96px;
	--ii-space-10: 128px;

	/* ----------------------------------------------------------------
	 * 4. BORDER RADIUS
	 * ---------------------------------------------------------------- */
	--ii-radius-sm: 4px;
	--ii-radius-md: 8px;
	--ii-radius-lg: 12px;
	--ii-radius-xl: 20px;
	--ii-radius-full: 9999px;

	/* ----------------------------------------------------------------
	 * 5. CONTAINER WIDTH
	 * ---------------------------------------------------------------- */
	--ii-container-sm: 640px;
	--ii-container-md: 960px;
	--ii-container-lg: 1200px;
	--ii-container-xl: 1400px;
	--ii-container-article: 720px;

	/* ----------------------------------------------------------------
	 * 6. SHADOW SYSTEM
	 * ---------------------------------------------------------------- */
	--ii-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
	--ii-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
	--ii-shadow-lg: 0 12px 24px rgba(16, 24, 40, 0.12);
	--ii-shadow-xl: 0 20px 40px rgba(16, 24, 40, 0.16);

	/* ----------------------------------------------------------------
	 * 7. ANIMATION / TRANSITIONS
	 * ---------------------------------------------------------------- */
	--ii-transition-fast: 150ms ease;
	--ii-transition-base: 250ms ease;
	--ii-transition-slow: 400ms ease;

	/* ----------------------------------------------------------------
	 * 8. Z-INDEX SCALE (kept here to avoid magic numbers in components)
	 * ---------------------------------------------------------------- */
	--ii-z-header: 100;
	--ii-z-mega-menu: 110;
	--ii-z-mobile-nav: 120;
	--ii-z-toc-sticky: 50;
	--ii-z-modal: 200;
	--ii-z-toast: 210;
}

/**
 * ----------------------------------------------------------------
 * 9. RESPONSIVE BREAKPOINTS (documented reference only)
 * ----------------------------------------------------------------
 * CSS custom properties cannot be used inside @media query conditions,
 * so these values are documented here for consistency and must be
 * manually mirrored in:
 *   - assets/css/*.css (media query blocks)
 *   - Elementor Pro > Settings > Layout > Custom Breakpoints
 *   - inc/design-system.php ($ii_breakpoints array, used for any
 *     server-rendered responsive logic)
 *
 *   xs:  0    – 479px   (small mobile)
 *   sm:  480  – 767px   (mobile)
 *   md:  768  – 1023px  (tablet)
 *   lg:  1024 – 1279px  (small desktop)
 *   xl:  1280 – 1535px  (desktop)
 *   2xl: 1536px+        (large desktop)
 */

/**
 * Respect reduced-motion preference globally — accessibility requirement.
 * Any future animation CSS must be written assuming this rule may zero
 * out durations, not as an afterthought.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--ii-transition-fast: 0ms;
		--ii-transition-base: 0ms;
		--ii-transition-slow: 0ms;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}