/*
 * A Gamer's View - CSS Design System: Core & Base variables
 */

/* 1. Base Variables & Reset */
/* 2. Core Variables */
:root {
	--bg-primary: #07060A;
	/* Deep void dark violet-black */
	--bg-secondary: #131221;
	/* Indigo shard slate */
	--text-primary: #CAF0F8;
	/* Ice starlight */
	--text-muted: #90E0EF;
	/* Light calm blue */
	--accent-cyan: #00B4D8;
	/* Glowing futuristic cyan */
	--accent-gold: #D4AF37;
	/* Classic gold highlight */
	--accent-red: #FF1E27;
	/* Striking neon red from image */
	--accent-red-rgb: 255, 30, 39;
	--border-color: rgba(0, 180, 216, 0.25);
	/* Clean border lines */
	--font-heading: 'Oxanium', sans-serif;
	--font-body: 'Plus Jakarta Sans', sans-serif;
	--font-mono: 'Share Tech Mono', monospace;
}

/* 3. Global Resets & Layout */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	background-color: var(--bg-primary);
}

/* Page fade-in transition on loading */
@keyframes bodyFadeIn {
	to {
		opacity: 1;
	}
}

body {
	background: var(--bg-primary);
	background: 
		radial-gradient(circle at 0% 0%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
		radial-gradient(circle at 100% 100%, rgba(255, 30, 39, 0.08) 0%, transparent 50%),
		radial-gradient(circle at center, #131221 0%, #07060A 100%);
	/* Clinical dark blue to black void with golden ambient corners */
	color: var(--text-primary);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow-x: hidden;

	/* Page transition */
	opacity: 0;
	animation: bodyFadeIn 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
}

.text-cyan {
	color: var(--accent-cyan);
	font-weight: 500;
}

.text-cyan:hover {
	text-decoration: underline;
}

/* Dynamic Background Canvas Overlay for Continuous Cursor Trail */
#bg-canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: -1;
}

/* Ensure layout content remains layered above background waves */
.site-header,
.main-content,
.site-footer {
	position: relative;
	z-index: 1;
}

/* --- Accessibility Focus States --- */
:focus-visible {
	outline: 2px solid var(--accent-gold);
	outline-offset: 4px;
}