/**
 * Veyra Apps Design System 0.3.1
 *
 * Source of truth:
 * - Primitive WordPress presets: theme.json
 * - Semantic aliases and reusable components: this file
 *
 * Keep page-specific composition out of this file. Add only styles that are
 * reusable across marketing pages, product pages, documentation and accounts.
 */

/* ==========================================================================
   01. Semantic design tokens
   ========================================================================== */

:root {
	/* Core colors */
	--veyra-bg: var(--wp--preset--color--background);
	--veyra-bg-soft: var(--wp--preset--color--background-soft);
	--veyra-deep-navy: var(--wp--preset--color--deep-navy);
	--veyra-surface: var(--wp--preset--color--surface);
	--veyra-surface-raised: var(--wp--preset--color--surface-raised);
	--veyra-border: var(--wp--preset--color--border);
	--veyra-text: var(--wp--preset--color--glass-white);
	--veyra-text-soft: var(--wp--preset--color--text-soft);
	--veyra-text-muted: var(--wp--preset--color--text-muted);

	/* Brand colors */
	--veyra-blue: var(--wp--preset--color--electric-blue);
	--veyra-purple: var(--wp--preset--color--veyra-purple);
	--veyra-violet: var(--wp--preset--color--neon-violet);
	--veyra-cyan: var(--wp--preset--color--cyan-glow);

	/* States */
	--veyra-success: var(--wp--preset--color--success);
	--veyra-info: var(--wp--preset--color--info);
	--veyra-warning: var(--wp--preset--color--warning);
	--veyra-error: var(--wp--preset--color--error);

	/* Alpha surfaces and borders */
	--veyra-surface-subtle: rgba(246, 248, 255, 0.025);
	--veyra-surface-glass: rgba(8, 13, 24, 0.16);
	--veyra-surface-glass-strong: rgba(8, 13, 24, 0.32);
	--veyra-surface-liquid: rgba(10, 16, 29, 0.11);
	--veyra-surface-liquid-hover: rgba(15, 23, 40, 0.22);
	--veyra-border-subtle: rgba(246, 248, 255, 0.08);
	--veyra-border-default: rgba(246, 248, 255, 0.12);
	--veyra-border-glass: rgba(179, 198, 255, 0.19);
	--veyra-border-strong: rgba(141, 164, 205, 0.26);
	--veyra-highlight: rgba(246, 248, 255, 0.10);
	--veyra-overlay: rgba(2, 5, 12, 0.72);

	/* Gradients */
	--veyra-gradient-brand: var(--wp--preset--gradient--veyra-brand);
	--veyra-gradient-aurora: var(--wp--preset--gradient--aurora);
	--veyra-gradient-ocean: var(--wp--preset--gradient--ocean);
	--veyra-gradient-glass: var(--wp--preset--gradient--liquid-glass);
	--veyra-gradient-text: var(--wp--preset--gradient--glass-text);
	--veyra-gradient-border: linear-gradient(
		135deg,
		rgba(0, 229, 255, 0.54),
		rgba(59, 140, 255, 0.62) 34%,
		rgba(138, 92, 255, 0.68) 68%,
		rgba(198, 156, 255, 0.54)
	);
	--veyra-gradient-page:
		radial-gradient(circle at 12% 4%, rgba(0, 229, 255, 0.12), transparent 28rem),
		radial-gradient(circle at 88% 10%, rgba(138, 92, 255, 0.14), transparent 34rem),
		radial-gradient(circle at 52% 72%, rgba(59, 140, 255, 0.08), transparent 42rem),
		linear-gradient(180deg, #02040a 0%, #050914 48%, #02040a 100%);

	/* Layout */
	--veyra-container-narrow: var(--wp--custom--container--narrow);
	--veyra-container-content: var(--wp--custom--container--content);
	--veyra-container-wide: var(--wp--custom--container--wide);
	--veyra-container-max: var(--wp--custom--container--max);
	--veyra-gutter: var(--wp--custom--container--gutter);
	--veyra-section-space: var(--wp--custom--section--space);
	--veyra-section-space-compact: var(--wp--custom--section--space-compact);

	/* Shape */
	--veyra-radius-xs: var(--wp--custom--radius--xs);
	--veyra-radius-sm: var(--wp--custom--radius--sm);
	--veyra-radius-md: var(--wp--custom--radius--md);
	--veyra-radius-lg: var(--wp--custom--radius--lg);
	--veyra-radius-xl: var(--wp--custom--radius--xl);
	--veyra-radius-2xl: var(--wp--custom--radius--xxl);
	--veyra-radius-pill: var(--wp--custom--radius--pill);

	/* Depth */
	--veyra-shadow-card: var(--wp--preset--shadow--card);
	--veyra-shadow-elevated: var(--wp--preset--shadow--elevated);
	--veyra-shadow-blue: var(--wp--preset--shadow--blue-glow);
	--veyra-shadow-purple: var(--wp--preset--shadow--purple-glow);
	--veyra-shadow-focus: 0 0 0 0.25rem rgba(59, 140, 255, 0.16);
	--veyra-shadow-glass:
		inset 0 1px 0 rgba(246, 248, 255, 0.09),
		0 1.25rem 4rem rgba(0, 0, 0, 0.24);
	--veyra-shadow-liquid:
		inset 0 1px 0 rgba(246, 248, 255, 0.08),
		inset 0 -1px 0 rgba(59, 140, 255, 0.04),
		0 1rem 3rem rgba(0, 0, 0, 0.14),
		0 0 2.5rem rgba(87, 92, 255, 0.035);

	/* Motion */
	--veyra-transition-fast: var(--wp--custom--transition--fast);
	--veyra-transition-base: var(--wp--custom--transition--base);
	--veyra-transition-slow: var(--wp--custom--transition--slow);
}

/* ==========================================================================
   02. Foundation
   ========================================================================== */

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

html {
	color-scheme: dark;
	scroll-padding-top: 6rem;
}

body {
	min-width: 20rem;
	overflow-wrap: break-word;
	background: var(--veyra-gradient-page);
	color: var(--veyra-text);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: rgba(138, 92, 255, 0.42);
	color: var(--veyra-text);
}

img,
picture,
svg,
video,
canvas {
	display: block;
	height: auto;
	max-width: 100%;
}

.veyra-icon {
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	max-width: none;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.veyra-icon--sm {
	width: 1rem;
	height: 1rem;
}

.veyra-icon--lg {
	width: 1.5rem;
	height: 1.5rem;
}

button,
input,
select,
textarea {
	font: inherit;
}

button,
[type="button"],
[type="submit"],
[role="button"] {
	-webkit-tap-highlight-color: transparent;
}

a {
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.2em;
}

a:not([class]) {
	text-decoration-line: underline;
	text-decoration-color: rgba(59, 140, 255, 0.48);
}

:focus-visible {
	outline: 2px solid var(--veyra-blue);
	outline-offset: 3px;
}

hr {
	border: 0;
	border-top: 1px solid var(--veyra-border-subtle);
}

/* ==========================================================================
   03. Site shell and containers
   ========================================================================== */

.wp-site-blocks {
	display: flex;
	min-height: 100svh;
	flex-direction: column;
}

.wp-site-blocks > main {
	flex: 1;
}

.veyra-container,
.veyra-container-wide,
.veyra-container-content,
.veyra-container-narrow {
	width: min(100% - (2 * var(--veyra-gutter)), var(--veyra-container-max));
	margin-inline: auto;
}

.veyra-container-wide {
	max-width: var(--veyra-container-wide);
}

.veyra-container-content {
	max-width: var(--veyra-container-content);
}

.veyra-container-narrow {
	max-width: var(--veyra-container-narrow);
}

.veyra-section {
	padding-block: var(--veyra-section-space);
}

.veyra-section--compact {
	padding-block: var(--veyra-section-space-compact);
}

.veyra-section--flush {
	padding-block: 0;
}

.veyra-stack {
	display: flex;
	flex-direction: column;
	gap: var(--veyra-stack-space, var(--wp--preset--spacing--md));
}

.veyra-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--veyra-cluster-space, var(--wp--preset--spacing--sm));
}

.veyra-cluster--between {
	justify-content: space-between;
}

.veyra-grid {
	display: grid;
	gap: var(--veyra-grid-gap, var(--wp--preset--spacing--md));
}

.veyra-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.veyra-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.veyra-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.veyra-grid--auto {
	grid-template-columns: repeat(
		auto-fit,
		minmax(min(100%, var(--veyra-grid-min, 16rem)), 1fr)
	);
}

.veyra-sidebar-layout {
	display: grid;
	grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: start;
}

.veyra-sidebar-layout--right {
	grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem);
}

.veyra-sticky {
	position: sticky;
	top: var(--veyra-sticky-top, 6rem);
}

/* ==========================================================================
   04. Typography
   ========================================================================== */

.veyra-display {
	max-width: 18ch;
	margin: 0;
	font-size: var(--wp--preset--font-size--display);
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -0.045em;
	text-wrap: balance;
}

.veyra-heading {
	margin: 0;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.veyra-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	padding: 0.375rem 0.625rem;
	border: 1px solid var(--veyra-border-subtle);
	border-radius: var(--veyra-radius-pill);
	background: rgba(246, 248, 255, 0.035);
	color: var(--veyra-text-soft);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 650;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: inset 0 1px 0 rgba(246, 248, 255, 0.05);
}

.veyra-eyebrow::before {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background: var(--veyra-gradient-aurora);
	box-shadow: 0 0 0.75rem rgba(59, 140, 255, 0.72);
	content: "";
}

.veyra-lead {
	max-width: 60ch;
	color: var(--veyra-text-soft);
	font-size: var(--wp--preset--font-size--body-large);
	line-height: 1.55;
}

.veyra-text-soft {
	color: var(--veyra-text-soft) !important;
}

.veyra-text-muted {
	color: var(--veyra-text-muted) !important;
}

.veyra-caption {
	color: var(--veyra-text-muted);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
}

.veyra-text-gradient {
	background: var(--veyra-gradient-text);
	background-clip: text;
	color: transparent;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.veyra-text-gradient--brand {
	background-image: var(--veyra-gradient-brand);
}

.veyra-balance {
	text-wrap: balance;
}

.veyra-pretty {
	text-wrap: pretty;
}

/* ==========================================================================
   05. Ambient backgrounds and hero treatments
   ========================================================================== */

.veyra-ambient,
.veyra-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.veyra-ambient > *,
.veyra-hero > * {
	position: relative;
	z-index: 1;
}

.veyra-ambient::before {
	position: absolute;
	z-index: -1;
	inset: -20%;
	pointer-events: none;
	content: "";
	background:
		radial-gradient(circle at 24% 36%, rgba(59, 140, 255, 0.16), transparent 24rem),
		radial-gradient(circle at 76% 52%, rgba(138, 92, 255, 0.14), transparent 26rem);
}

.veyra-ambient--ocean::before {
	background:
		radial-gradient(circle at 72% 42%, rgba(0, 229, 255, 0.16), transparent 22rem),
		radial-gradient(circle at 35% 65%, rgba(59, 140, 255, 0.16), transparent 27rem);
}

.veyra-hero {
	min-height: min(48rem, 86svh);
	display: grid;
	align-items: center;
	padding-block: clamp(6rem, 12vw, 10rem);
	background:
		radial-gradient(ellipse at 50% 45%, rgba(14, 15, 29, 0.18), rgba(5, 7, 15, 0.78) 54%, var(--veyra-bg) 78%),
		linear-gradient(180deg, rgba(5, 7, 15, 0.34), var(--veyra-bg));
}

.veyra-hero::before {
	position: absolute;
	z-index: -2;
	left: 50%;
	bottom: -48%;
	width: min(92rem, 130vw);
	aspect-ratio: 2 / 1;
	border: 1px solid rgba(151, 181, 255, 0.22);
	border-radius: 50%;
	pointer-events: none;
	content: "";
	transform: translateX(-50%);
	box-shadow:
		0 -0.125rem 1rem rgba(0, 229, 255, 0.38),
		0 -0.25rem 2.5rem rgba(59, 140, 255, 0.44),
		0 -1rem 6rem rgba(138, 92, 255, 0.38),
		inset 0 0.125rem 1rem rgba(198, 156, 255, 0.22);
}

.veyra-hero::after {
	position: absolute;
	z-index: -3;
	inset: 0;
	pointer-events: none;
	content: "";
	background:
		radial-gradient(circle at 12% 72%, rgba(0, 229, 255, 0.16), transparent 18rem),
		radial-gradient(circle at 88% 64%, rgba(138, 92, 255, 0.20), transparent 22rem),
		radial-gradient(circle at 52% 88%, rgba(59, 140, 255, 0.12), transparent 28rem);
}

.veyra-hero--compact {
	min-height: auto;
	padding-block: clamp(4.5rem, 8vw, 7rem);
}

/* ==========================================================================
   06. Global utilities and accessibility
   ========================================================================== */

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

.veyra-full-bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.veyra-center {
	margin-inline: auto;
}

.veyra-no-margin {
	margin: 0 !important;
}

.veyra-overflow-hidden {
	overflow: hidden;
}

.veyra-relative {
	position: relative;
}

.veyra-isolate {
	isolation: isolate;
}

.veyra-skip-link {
	position: fixed;
	z-index: 9999;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.75rem 1rem;
	border-radius: var(--veyra-radius-sm);
	background: var(--veyra-text);
	color: var(--veyra-bg);
	font-weight: 700;
	transform: translateY(-180%);
	transition: transform var(--veyra-transition-fast);
}

.veyra-skip-link:focus {
	transform: translateY(0);
}

/* ==========================================================================
   07. Global responsive behaviour
   ========================================================================== */

@media (max-width: 64rem) {
	.veyra-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.veyra-sidebar-layout,
	.veyra-sidebar-layout--right {
		grid-template-columns: 1fr;
	}

	.veyra-sticky {
		position: static;
	}
}

@media (max-width: 48rem) {
	.veyra-grid--2,
	.veyra-grid--3,
	.veyra-grid--4 {
		grid-template-columns: 1fr;
	}

	.veyra-hero {
		min-height: auto;
		padding-block: 6rem;
	}

	.veyra-hero::before {
		bottom: -22%;
		width: 160vw;
	}

	.veyra-cluster--mobile-stack {
		align-items: stretch;
		flex-direction: column;
	}

	.veyra-cluster--mobile-stack > * {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

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

@media (forced-colors: active) {
	.veyra-text-gradient,
	.veyra-text-gradient--brand {
		background: none;
		color: CanvasText;
		-webkit-text-fill-color: currentColor;
	}
}