/**
 * Jisento Design Tokens
 * ---------------------
 * Mapped from the Lovable Jisento source (src/styles.css :root / @theme).
 * oklch values are stored as hex/rgba so WordPress and Elementor can use them.
 */

:root {

	/* Lovable: oklch(0.55 0.23 276) → indigo primary */
	--jisento-primary: var(--e-global-color-primary, #3D5BFF);
	--jisento-primary-hover: #2E48E6;
	--jisento-primary-soft: #E8EDFF;
	/* Lovable: oklch(0.75 0.14 205) → cyan accent */
	--jisento-accent: var(--e-global-color-accent, #3EC6D4);
	/* Lovable: oklch(0.19 0.05 265) */
	--jisento-dark: var(--e-global-color-secondary, #1B2140);
	--jisento-dark-soft: #252C52;
	--jisento-text: var(--e-global-color-text, #1B2140);
	/* Lovable: oklch(0.48 0.045 260) */
	--jisento-muted: var(--e-global-color-jisento_muted, #66708A);
	--jisento-muted-light: #8891A6;
	/* Lovable: oklch(0.975 0.011 250) */
	--jisento-bg: #F3F6FA;
	--jisento-bg-soft: #EEF3FB;
	/* Lovable: oklch(0.85 0.025 255 / 0.68) */
	--jisento-border: rgba(184, 198, 220, 0.68);
	--jisento-border-strong: #C5D0E0;
	--jisento-success: #1F9A5C;
	--jisento-success-soft: #D6F3E4;
	--jisento-error: #B3261E;
	--jisento-white: #FFFFFF;

	--jisento-text-on-dark: #F4F6FB;
	--jisento-muted-on-dark: rgba(244, 246, 251, 0.65);

	--jisento-glass: rgba(255, 255, 255, 0.48);
	--jisento-glass-strong: rgba(255, 255, 255, 0.76);

	--jisento-glow: rgba(91, 71, 240, 0.24);
	--jisento-glow-strong: rgba(91, 71, 240, 0.34);

	/* Lovable: Space Grotesk display + Inter body */
	--jisento-font-heading: "Space Grotesk", "Segoe UI", sans-serif;
	--jisento-font-body: "Inter", "Segoe UI", sans-serif;

	--jisento-fs-xs: 0.875rem;
	--jisento-fs-sm: 1rem;
	--jisento-fs-base: 1.0625rem;
	--jisento-fs-md: 1.1875rem;
	--jisento-fs-lg: 1.375rem;
	--jisento-fs-xl: 1.625rem;
	--jisento-fs-2xl: 2.5rem;
	--jisento-fs-3xl: 3.25rem;
	--jisento-fs-4xl: clamp(2.85rem, 6vw, 4.65rem);

	--jisento-lh-tight: 1.04;
	--jisento-lh-heading: 1.15;
	--jisento-lh-body: 1.75;

	--jisento-ls-tight: -0.03em;
	--jisento-ls-display: -0.04em;
	--jisento-ls-normal: 0;
	--jisento-ls-wide: 0.08em;

	--jisento-space-1: 0.5rem;
	--jisento-space-2: 0.75rem;
	--jisento-space-3: 1rem;
	--jisento-space-4: 1.5rem;
	--jisento-space-5: 2rem;
	--jisento-space-6: 3rem;
	--jisento-space-7: 4.5rem;
	--jisento-space-8: 6.5rem;
	--jisento-space-9: 8.5rem;

	--jisento-section-space: clamp(6rem, 10vw, 8rem);

	/* Lovable max-w-7xl = 80rem */
	--jisento-container-narrow: 768px;
	--jisento-container: 1280px;
	--jisento-container-wide: 1280px;
	--jisento-container-padding: 1.25rem;

	--jisento-radius-sm: 8px;
	--jisento-radius-md: 12px;
	--jisento-radius-lg: 20px;
	--jisento-radius-xl: 32px;
	--jisento-radius-pill: 999px;

	--jisento-shadow-sm: 0 12px 30px rgba(27, 33, 64, 0.1);
	--jisento-shadow-md: 0 14px 40px rgba(55, 40, 120, 0.07);
	--jisento-shadow-lg: 0 26px 70px rgba(55, 40, 120, 0.14);
	--jisento-shadow-brand: 0 12px 30px rgba(91, 71, 240, 0.24);
	--jisento-shadow-brand-lg: 0 18px 44px rgba(91, 71, 240, 0.34);
	--jisento-shadow-focus: 0 0 0 3px rgba(91, 71, 240, 0.28);

	--jisento-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--jisento-duration-fast: 160ms;
	--jisento-duration-base: 220ms;
	--jisento-duration-slow: 520ms;

	--jisento-z-header: 100;
	--jisento-z-overlay: 200;
	--jisento-z-modal: 300;
}

@media (min-width: 640px) {
	:root {
		--jisento-container-padding: 2rem;
	}
}

@media (min-width: 1024px) {
	:root {
		--jisento-container-padding: 2.5rem;
	}
}

@media (min-width: 1280px) {
	html {
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--jisento-duration-fast: 0ms;
		--jisento-duration-base: 0ms;
		--jisento-duration-slow: 0ms;
	}
}