/* WISEVOC — global tokens and base */

:root {
	--wv-color-obsidian: #080e1a;
	--wv-color-surface: #0d1628;
	--wv-color-surface-raised: #111e35;
	--wv-color-border: #1c2e4a;
	--wv-color-teal: #00e5c3;
	--wv-color-teal-dark: #00c4a7;
	--wv-color-cyan: #38bdf8;
	--wv-color-danger: #ff3b5c;
	--wv-color-warning: #f59e0b;
	--wv-color-success: #10b981;
	--wv-color-text-primary: #f0f6ff;
	--wv-color-text-secondary: #7a9cc4;
	--wv-color-text-tertiary: #3d5a7a;
	--wv-color-deep: #040a14;

	/* Aliases for backward-compat with inline usage */
	--wv-color-secondary: var(--wv-color-cyan);
	--wv-color-bg: var(--wv-color-obsidian);
	--wv-header-height: 80px;

	--wv-font-display: "Syne", sans-serif;
	--wv-font-ui: "Space Grotesk", sans-serif;
	--wv-font-body: "DM Sans", sans-serif;
	--wv-font-mono: "JetBrains Mono", monospace;

	--wv-space-1: 4px;
	--wv-space-2: 8px;
	--wv-space-3: 12px;
	--wv-space-4: 16px;
	--wv-space-5: 20px;
	--wv-space-6: 24px;
	--wv-space-8: 32px;
	--wv-space-10: 40px;
	--wv-space-12: 48px;
	--wv-space-14: 56px;
	--wv-space-16: 64px;
	--wv-space-20: 80px;
	--wv-space-35: 140px;

	--wv-radius-sm: 6px;
	--wv-radius-md: 12px;
	--wv-radius-lg: 16px;
	--wv-radius-xl: 24px;
	--wv-radius-pill: 9999px;

	--wv-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
	--wv-ease-out: cubic-bezier(0, 0, 0.2, 1);
	--wv-dur-fast: 200ms;
	--wv-dur-base: 300ms;
	--wv-dur-slow: 600ms;
	--wv-dur-reveal: 800ms;
	--wv-stagger: 60ms;

	--wv-glass-bg: rgba(13, 22, 40, 0.65);
	--wv-glass-border: rgba(0, 229, 195, 0.1);
	--wv-glow-teal: 0 0 40px rgba(0, 229, 195, 0.25), 0 0 80px rgba(0, 229, 195, 0.1);
	--wv-shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
}

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: var(--wv-color-obsidian);
	color: var(--wv-color-text-primary);
	font-family: var(--wv-font-body);
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}

::selection {
	background-color: var(--wv-color-teal);
	color: var(--wv-color-obsidian);
}

.wv-glass {
	background: var(--wv-glass-bg);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid var(--wv-glass-border);
	border-radius: var(--wv-radius-lg);
	box-shadow: var(--wv-shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.wv-glow {
	box-shadow: var(--wv-glow-teal);
}

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

.wv-container {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--wv-space-8);
}

.wv-bg-mesh {
	background:
		radial-gradient(ellipse at 20% 50%, rgba(0, 229, 195, 0.12) 0%, transparent 60%),
		radial-gradient(ellipse at 80% 20%, rgba(56, 189, 248, 0.08) 0%, transparent 50%),
		var(--wv-color-obsidian);
	background-size: 200% 200%;
	animation: wv-mesh-shift 8s ease infinite;
}

.wv-eyebrow {
	font-family: var(--wv-font-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wv-color-teal);
	display: flex;
	align-items: center;
	gap: var(--wv-space-2);
}

.wv-eyebrow::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 14px;
	background: var(--wv-color-teal);
	animation: wv-blink 0.8s step-start infinite;
}

.wv-font-display {
	font-family: var(--wv-font-display);
}

.wv-font-ui {
	font-family: var(--wv-font-ui);
}

.wv-font-body {
	font-family: var(--wv-font-body);
}

.wv-font-mono {
	font-family: var(--wv-font-mono);
}

.wv-fw-300 {
	font-weight: 300;
}

.wv-fw-400 {
	font-weight: 400;
}

.wv-fw-500 {
	font-weight: 500;
}

.wv-fw-600 {
	font-weight: 600;
}

.wv-fw-700 {
	font-weight: 700;
}

.wv-fw-800 {
	font-weight: 800;
}

.wv-text-obsidian {
	color: var(--wv-color-obsidian);
}

.wv-text-surface {
	color: var(--wv-color-surface);
}

.wv-text-surface-raised {
	color: var(--wv-color-surface-raised);
}

.wv-text-border {
	color: var(--wv-color-border);
}

.wv-text-teal {
	color: var(--wv-color-teal);
}

.wv-text-teal-dark {
	color: var(--wv-color-teal-dark);
}

.wv-text-cyan {
	color: var(--wv-color-cyan);
}

.wv-text-danger {
	color: var(--wv-color-danger);
}

.wv-text-warning {
	color: var(--wv-color-warning);
}

.wv-text-success {
	color: var(--wv-color-success);
}

.wv-text-primary {
	color: var(--wv-color-text-primary);
}

.wv-text-secondary {
	color: var(--wv-color-text-secondary);
}

.wv-text-tertiary {
	color: var(--wv-color-text-tertiary);
}

.wv-text-deep {
	color: var(--wv-color-deep);
}

.wv-bg-obsidian {
	background-color: var(--wv-color-obsidian);
}

.wv-bg-surface {
	background-color: var(--wv-color-surface);
}

.wv-bg-surface-raised {
	background-color: var(--wv-color-surface-raised);
}

.wv-bg-border {
	background-color: var(--wv-color-border);
}

.wv-bg-teal {
	background-color: var(--wv-color-teal);
}

.wv-bg-deep {
	background-color: var(--wv-color-deep);
}

.wv-notification-delay-0 {
	animation-delay: 0s;
}

.wv-notification-delay-1 {
	animation-delay: 1s;
}

.wv-notification-delay-2 {
	animation-delay: 2s;
}