/*
|--------------------------------------------------------------------------
| EventFlow Design System — Color & Glow
| EFDS-001
|--------------------------------------------------------------------------
*/

:root {
	color-scheme: dark;
}

body {
	background:
		var(--ef-gradient-glow),
		var(--ef-gradient-institutional);
	color: var(--ef-color-text);
}

.ef-surface {
	background: var(--ef-surface-1);
}

.ef-surface--raised {
	background: var(--ef-surface-2);
	box-shadow: var(--ef-shadow-md);
}

.ef-surface--glass {
	background: var(--ef-surface-3);
	border: 1px solid var(--ef-border-subtle);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

.ef-accent {
	color: var(--ef-accent);
}

.ef-accent-bg {
	background: var(--ef-accent);
	color: var(--ef-color-navy-950);
}

.ef-border-accent {
	border-color: var(--ef-border-accent);
}

.ef-glow {
	box-shadow: var(--ef-glow-md);
}

.ef-glow--soft {
	box-shadow: var(--ef-glow-sm);
}

.ef-glow--large {
	box-shadow: var(--ef-glow-lg);
}

.ef-glow-field {
	position: relative;
	isolation: isolate;
}

.ef-glow-field::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -20%;
	background: var(--ef-gradient-glow);
	filter: blur(18px);
	pointer-events: none;
}

/* ==========================================================
   Vertical Accent Contract
   ========================================================== */

[data-ef-accent="cyan"] {
	--ef-accent: var(--ef-color-cyan-500);
	--ef-accent-soft: var(--ef-color-cyan-400);
	--ef-accent-glow: rgba(68, 217, 230, 0.40);
}

[data-ef-accent="orange"] {
	--ef-accent: var(--ef-color-orange);
	--ef-accent-soft: #ff9a82;
	--ef-accent-glow: rgba(255, 114, 79, 0.34);
}

[data-ef-accent="green"] {
	--ef-accent: var(--ef-color-green);
	--ef-accent-soft: #9be3a5;
	--ef-accent-glow: rgba(111, 210, 123, 0.30);
}

[data-ef-accent="purple"] {
	--ef-accent: var(--ef-color-purple);
	--ef-accent-soft: #b2a9ff;
	--ef-accent-glow: rgba(141, 125, 255, 0.34);
}

[data-ef-accent] .ef-glow {
	box-shadow: 0 0 32px var(--ef-accent-glow);
}