@import url('/_resources/css/_footer.css');
@import url('/_resources/css/_nav.css');
@import url('/_resources/css/_hero.css');
@import url('/_resources/css/_pillars.css');

:root {
	--background: oklch(0.16 0.04 280);
	--foreground: oklch(0.98 0.01 250);
	--muted-foreground: oklch(0.74 0.04 270);
	--border-soft: oklch(1 0 0 / 0.10);
	--neon-cyan: oklch(0.85 0.18 200);
	--neon-magenta: oklch(0.72 0.27 340);
	--neon-lime: oklch(0.90 0.22 130);
	--neon-violet: oklch(0.65 0.25 295);
	--primary-foreground: oklch(0.16 0.04 280);
	--gradient-aurora: linear-gradient(135deg, oklch(0.65 0.25 295) 0%, oklch(0.72 0.27 340) 35%, oklch(0.85 0.18 200) 70%, oklch(0.90 0.22 130) 100%);
	--gradient-hero: radial-gradient(circle at 20% 20%, oklch(0.65 0.25 295 / 0.6), transparent 50%),
		radial-gradient(circle at 80% 30%, oklch(0.72 0.27 340 / 0.5), transparent 55%),
		radial-gradient(circle at 50% 90%, oklch(0.85 0.18 200 / 0.4), transparent 60%);
	--shadow-glow: 0 0 60px -10px oklch(0.82 0.18 200 / 0.6);
}

@font-face { 
	font-family: "Space Grotesk"; 
	font-style: normal; 
	font-weight: 300 700;
	src: url("https://fonts.gstatic.com/s/spacegrotesk/v16/V8mDoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj7oUUxjLA.woff2") format("woff2");
	font-display: swap;
}
@font-face { 
	font-family: "JetBrains Mono"; 
	font-style: normal; 
	font-weight: 400 700;
	src: url("https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxjPVmUsaaDhw.woff2") format("woff2");
	font-display: swap;
}

body {
	background-color: var(--background);
	color: var(--foreground);
	font-family: "Space Grotesk", system-ui, sans-serif;
	background-image:
		radial-gradient(ellipse 80% 60% at 50% -10%, oklch(0.65 0.25 295 / 0.25), transparent 60%),
		radial-gradient(ellipse 60% 40% at 90% 10%, oklch(0.72 0.27 340 / 0.18), transparent 60%),
		radial-gradient(ellipse 60% 40% at 0% 30%, oklch(0.85 0.18 200 / 0.18), transparent 60%);
	background-attachment: fixed;
	min-height: 100vh;
}
h1, h2, h3, h4 { 
	font-family: "Space Grotesk", sans-serif; 
	letter-spacing: -0.02em; 
	line-height: 1.1;
}
.font-mono, .kicker, .brand-sub { 
	font-family: "JetBrains Mono", ui-monospace, monospace;
}
.container-fluid { padding: 0; }

/* BRAND UTILITIES */
.text-gradient { 
	background: var(--gradient-aurora); 
	background-clip: text; 
	color: transparent; 
}
.bg-aurora { 
	background: var(--gradient-aurora); 
}
.bg-hero { 
	background: var(--gradient-hero); 
}
.glass {
	background: oklch(1 0 0 / 0.04);
	backdrop-filter: blur(18px);
	border: 1px solid oklch(1 0 0 / 0.08);
}
.glow { 
	box-shadow: var(--shadow-glow); 
}
.grid-bg {
	background-image:
		linear-gradient(oklch(1 0 0 / 0.04) 1px, transparent 1px),
		linear-gradient(90deg, oklch(1 0 0 / 0.04) 1px, transparent 1px);
	background-size: 48px 48px;
}

/* KICKERS */
.kicker {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}
.kicker.cyan {
    color: var(--neon-cyan);
}
.kicker.magenta {
    color: var(--neon-magenta);
}
.kicker.lime {
    color: var(--neon-lime);
}

/* FEATURED */
.featured {
    border-radius: 1.5rem;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
}
@media (min-width: 768px) {
    .featured {
        padding: 3.5rem;
    }
}
.event {
    border-radius: 1rem;
    border: 1px solid var(--border-soft);
    background: oklch(0.21 0.05 282 / 0.6);
    padding: 1.25rem;
    transition: border-color 0.2s;
    height: 100%;
}
.event:hover {
    border-color: var(--neon-cyan);
}
.event .tag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--neon-magenta);
}
.event .title {
    margin-top: 0.5rem;
    font-weight: 600;
}
.event .date {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    margin-top: 0.5rem;
}