/* ==========================================================================
   LUNA LABS - Base Styles
   Reset, CSS Variables, and Accessibility Utilities
   ========================================================================== */

/* ==========================================================================
   1. RESET & BASE STYLES
   ========================================================================== */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* -----------------------------------------------------------------------------
   Accessibility Utilities
   ----------------------------------------------------------------------------- */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100%;
	left: 1rem;
	padding: 0.75rem 1rem;
	background: var(--text);
	color: var(--background);
	text-decoration: none;
	font-weight: 500;
	z-index: 10000;
	transition: top 0.2s ease;
}

.skip-link:focus {
	top: 1rem;
}

/* Custom text selection colors */
::selection {
	background: var(--text);
	color: var(--background);
}

::-moz-selection {
	background: var(--text);
	color: var(--background);
}

/* ==========================================================================
   2. CSS CUSTOM PROPERTIES (Theme Variables)
   Supports light/dark mode via data-theme attribute
   ========================================================================== */
:root {
	/* Light Mode - Luna Theme */
	--background: #fafaf5;
	--foreground: #171717;
	--text: #1a1a1a;
	--text-muted: #3d3d3d;
	/* WCAG AAA contrast: ~7:1 ratio on #e5e5e0 */
	--accent: #a82a2a;
	/* Darker red for better contrast: ~5.5:1 ratio */
	--border: #1a1a1a;
	--surface: rgba(0, 0, 0, 0.04);
	/* Subtle surface for cards */
}

[data-theme="dark"] {
	/* Dark Mode - Luna Theme */
	--background: #0a0a0a;
	--foreground: #ededed;
	--text: #f5f5f0;
	--text-muted: #c5c5c5;
	/* WCAG AAA contrast: ~10:1 ratio on #0a0a0a */
	--accent: #ef6b6b;
	/* Lighter red for better contrast in dark mode */
	--border: #f5f5f0;
	--surface: rgba(255, 255, 255, 0.05);
	/* Subtle surface for cards */
}

/* CSS custom properties for mouse position and dynamic glow (set via JS) */
:root {
	--mouse-x: 50%;
	--mouse-y: 50%;
	--glow-radius: 120px;
}