/* ==========================================================================
   Ëvozee Design System — tokens, typography, base elements, resets
   ========================================================================== */

:root{
	/* Brand (overridden inline by Customizer values via wp_add_inline_style) */
	--evz-primary: #5B3DF6;
	--evz-primary-dark: #4429D1;
	--evz-secondary: #0EA5A4;
	--evz-accent: #FF6A3D;

	/* Neutrals */
	--evz-ink: #0B0B14;
	--evz-ink-soft: #34324a;
	--evz-muted: #6b6980;
	--evz-border: #e7e5f1;
	--evz-surface: #F6F5FB;
	--evz-surface-2: #EFEDFA;
	--evz-white: #FFFFFF;

	/* Gradients */
	--evz-gradient-brand: linear-gradient(135deg, var(--evz-primary) 0%, #8B6CFF 50%, var(--evz-secondary) 100%);
	--evz-gradient-glow: radial-gradient(circle, rgba(91,61,246,0.35) 0%, rgba(91,61,246,0) 70%);

	/* Typography */
	--evz-font-heading: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
	--evz-font-body: 'Plus Jakarta Sans', sans-serif;

	/* Radius / shadow / spacing */
	--evz-radius: 14px;
	--evz-radius-lg: 24px;
	--evz-radius-sm: 8px;
	--evz-shadow-sm: 0 2px 8px rgba(11,11,20,0.06);
	--evz-shadow-md: 0 12px 32px rgba(11,11,20,0.10);
	--evz-shadow-lg: 0 24px 64px rgba(11,11,20,0.16);
	--evz-container: 1200px;
	--evz-container-wide: 1440px;
	--evz-container-narrow: 820px;
	--evz-gutter: clamp(1rem, 4vw, 2.5rem);
	--evz-header-height: 86px;

	/* Semantic design-token aliases — same values as the tokens above, named
	   to match a conventional design-system vocabulary (background/surface/
	   text/accent/border/shadow/radius/container) so the system is easy to
	   reference or theme without touching every existing var(--evz-*) call. */
	--evz-bg-primary: var(--evz-white);
	--evz-bg-secondary: var(--evz-surface);
	--evz-text: var(--evz-ink-soft);
	--evz-text-muted: var(--evz-muted);
	--evz-border-color: var(--evz-border);
	--evz-shadow: var(--evz-shadow-md);

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

	color-scheme: light;
	padding-top: env(safe-area-inset-top, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* The brand surface palette is intentionally constant regardless of OS
   light/dark preference — `color-scheme: light` above keeps native form
   controls/scrollbars light to match. The site's own dark sections (hero,
   footer, service/case-study heroes, CTA band) are permanently dark by
   design already; a real adaptive dark theme would need every text/icon/
   border color audited in tandem (not just the surface tokens), which is
   out of scope here. --evz-white therefore always means literal white. */

*, *::before, *::after{ box-sizing: border-box; }

/* Horizontal-overflow safety net for decorative elements. `hidden` on body
   would make it a scroll container and break the sticky header, so only the
   viewport (html) uses hidden and body uses `clip`, which clips without
   creating a scroll container. */
html{ scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior: auto; }
	*, *::before, *::after{
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

body{
	margin: 0;
	overflow-x: clip;
	font-family: var(--evz-font-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--evz-ink-soft);
	background: var(--evz-white);
	-webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; height: auto; display: block; }
[hidden]{ display: none !important; }

h1, h2, h3, h4, h5, h6{
	font-family: var(--evz-font-heading);
	color: var(--evz-ink);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 0.6em;
	letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
h2{ font-size: clamp(1.7rem, 2.8vw, 2.5rem); }
h3{ font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
h4{ font-size: 1.1rem; }
p{ margin: 0 0 1em; }
small, .evz-small{ font-size: 0.85rem; }

/* Full type scale: Display / H1-H4 / Body / Small / Label, all fluid via clamp() */
.evz-display{
	font-family: var(--evz-font-heading);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.015em;
	color: var(--evz-ink);
	font-size: clamp(2.8rem, 5.6vw, 4.6rem);
}
.evz-text-body{ font-size: clamp(1rem, 1.05vw, 1.1rem); line-height: 1.65; }
.evz-label{
	display: inline-block;
	font-family: var(--evz-font-heading);
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--evz-text-muted);
}

a{ color: var(--evz-primary); text-decoration: none; }
a:hover{ color: var(--evz-primary-dark); }

ul, ol{ padding-left: 1.25em; }

/* Focus states — accessibility */
/* --evz-primary keeps at least a 3:1 non-text contrast ratio against both
   the site's light surfaces and its dark (hero/footer/CTA) sections —
   --evz-accent only clears that bar on dark backgrounds (2.85:1 on white,
   below the WCAG 1.4.11 minimum), so it isn't used for the focus ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
	outline: 2px solid var(--evz-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

.screen-reader-text{
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

.evz-skip-link{
	position: fixed;
	top: -100px;
	left: 1rem;
	z-index: 10000;
	background: var(--evz-ink);
	color: var(--evz-white);
	padding: 0.75em 1.25em;
	border-radius: var(--evz-radius-sm);
	transition: top 0.2s ease;
}
.evz-skip-link:focus{ top: 1rem; }

.evz-container{
	max-width: var(--evz-container);
	margin-inline: auto;
	padding-inline: var(--evz-gutter);
}
.evz-container--wide{ max-width: var(--evz-container-wide); }
.evz-container--narrow{ max-width: var(--evz-container-narrow); }

.evz-section{ padding-block: clamp(3rem, 6vw, 6rem); }
.evz-section--muted{ background: var(--evz-surface); }
.evz-section--sm{ padding-block: clamp(2rem, 4vw, 3.5rem); }
.evz-section--lg{ padding-block: clamp(4rem, 8vw, 8rem); }

/* Reusable premium card — borders, depth, hover elevation, optional glass
   treatment. Available as a general-purpose utility (e.g. via Elementor
   Free's "CSS Classes" field) on top of the theme's more specific card
   components (.evz-service-card, .evz-cs-card, etc.), which already share
   the same visual language. */
.evz-card{
	display: block;
	background: var(--evz-bg-primary);
	border: 1px solid var(--evz-border-color);
	border-radius: var(--evz-radius-lg);
	padding: var(--evz-space-5);
	box-shadow: var(--evz-shadow-sm);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.evz-card--interactive{ cursor: pointer; }
.evz-card--interactive:hover,
a.evz-card:hover{
	transform: translateY(-6px);
	box-shadow: var(--evz-shadow-lg);
	border-color: transparent;
}
.evz-card--glass{
	background: rgba(255,255,255,0.07);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	border-color: rgba(255,255,255,0.14);
	color: var(--evz-white);
}
@media (prefers-reduced-motion: reduce){
	.evz-card{ transition: box-shadow 0.15s ease, border-color 0.15s ease; }
	.evz-card--interactive:hover,
	a.evz-card:hover{ transform: none; }
}

.evz-eyebrow{
	display: inline-block;
	font-family: var(--evz-font-heading);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--evz-primary);
	margin-bottom: 0.75em;
}

.evz-section__heading{ max-width: 760px; margin-bottom: 2.5rem; }
.evz-section__heading--center{ margin-inline: auto; text-align: center; }
.evz-section__desc{ color: var(--evz-muted); font-size: 1.05rem; }
.evz-section__title{ margin-bottom: 0.5em; }
.evz-section__cta{ margin-top: 2.5rem; text-align: center; }
.evz-section__cta-note{ margin-top: 1rem; font-size: 0.88rem; color: var(--evz-muted); }
.evz-section__cta-note a{ font-weight: 600; text-decoration: underline; }

.evz-demo-note{
	font-size: 0.8rem;
	color: var(--evz-muted);
	font-style: italic;
	margin-bottom: 1.5rem;
}

/* Buttons */
.evz-btn{
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--evz-font-heading);
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.9em 1.6em;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}
.evz-btn__icon{ transition: transform 0.2s ease; }
.evz-btn:hover .evz-btn__icon{ transform: translateX(3px); }

.evz-btn--primary{
	background: var(--evz-gradient-brand);
	color: var(--evz-white);
	box-shadow: var(--evz-shadow-md);
}
.evz-btn--primary:hover{ color: var(--evz-white); transform: translateY(-2px); box-shadow: var(--evz-shadow-lg); }

.evz-btn--secondary{
	background: var(--evz-ink);
	color: var(--evz-white);
}
.evz-btn--secondary:hover{ color: var(--evz-white); transform: translateY(-2px); }

.evz-btn--ghost{
	background: transparent;
	color: var(--evz-ink);
	border-color: var(--evz-border);
}
.evz-btn--ghost:hover{ color: var(--evz-ink); border-color: var(--evz-primary); background: var(--evz-surface); }

.evz-btn--text{
	background: transparent;
	color: var(--evz-primary);
	padding: 0.4em 0.2em;
	border-radius: 0;
}
.evz-btn--text:hover{ color: var(--evz-primary-dark); background: transparent; }
.evz-btn--text .evz-btn__icon{ margin-left: -0.15em; }

.evz-btn--sm{ padding: 0.6em 1.2em; font-size: 0.85rem; }

.evz-btn:active{ transform: translateY(0) scale(0.97); transition-duration: 0.1s; }
.evz-btn:disabled,
.evz-btn[aria-disabled="true"]{
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
	transform: none;
	box-shadow: none;
}

@media (max-width: 480px){
	.evz-btn:not(.evz-btn--text){ width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce){
	.evz-btn{ transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
	.evz-btn:hover,
	.evz-btn:active{ transform: none; }
}