/*
// Copyright 2026 Symbolic Software <nadim@symbolic.software>
// All Rights Reserved
*/

/* ============================================
   Base Reset
   ============================================ */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* ============================================
   CSS Variables - Design System
   ============================================ */
:root {
	/* 90s funky palette */
	--electric-blue: #0066FF;
	--electric-blue-dark: #0052cc;
	--hot-pink: #FF0080;
	--hot-pink-dark: #cc0066;
	--cyber-yellow: #FFE500;
	--lime: #00FF66;
	--orange: #FF6B35;
	--purple: #9747FF;
	--white: #FFFFFF;
	--off-white: #F8F8F8;
	--light-gray: #EEEEEE;
	--light-gray-alt: #e0e0e0;
	--black: #0A0A0A;
	--gray: #666666;

	/* Functional */
	--text-primary: #0A0A0A;
	--text-secondary: #444444;
	--text-muted: #888888;
	--placeholder-color: #aaa;
	--border: #0A0A0A;
	--success: #00CC55;
	--danger: #FF3366;
	--danger-dark: #cc2952;

	/* Shadows - refined for elegance */
	--shadow-sm: 3px 3px 0 var(--black);
	--shadow-md: 4px 4px 0 var(--black);
	--shadow-lg: 6px 6px 0 var(--black);
	--shadow-color: 4px 4px 0 var(--electric-blue);

	/* Border radius - subtle softening while staying retro */
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 6px;
	--radius-full: 50%;

	/* Transitions */
	--transition-fast: 0.1s ease;
	--transition-base: 0.15s ease;
	--transition-slow: 0.25s ease;

	/* Background pattern */
	--dot-pattern-color: #ddd;

	/* Inverted sections (always dark bg, light text) */
	--inverted-bg: #0A0A0A;
	--inverted-text: #FFFFFF;
	--inverted-text-muted: rgba(255, 255, 255, 0.7);
	--inverted-text-subtle: rgba(255, 255, 255, 0.5);
	--inverted-border: #FFFFFF;

	/* Subtle borders */
	--border-subtle: rgba(0, 0, 0, 0.1);

	/* Danger background */
	--danger-bg-subtle: rgba(255, 51, 102, 0.1);

	/* Overlay backgrounds */
	--overlay-bg: rgba(0, 0, 0, 0.5);
	--overlay-bg-heavy: rgba(10, 10, 10, 0.8);
}

/* ============================================
   Dark Mode - Automatic Device Preference
   ============================================ */
@media (prefers-color-scheme: dark) {
	:root {
		/* Adjusted accent colors for dark mode */
		--electric-blue: #4499FF;
		--electric-blue-dark: #3388EE;
		--hot-pink: #FF4499;
		--hot-pink-dark: #EE3388;
		--cyber-yellow: #FFE500;
		--lime: #00FF66;
		--orange: #FF8855;
		--purple: #BB77FF;

		/* Surface colors - these swap for dark mode */
		--white: #1A1A1A;
		--off-white: #121212;
		--light-gray: #2A2A2A;
		--light-gray-alt: #1E1E1E;
		--black: #F0F0F0;
		--gray: #AAAAAA;

		/* Functional */
		--text-primary: #F0F0F0;
		--text-secondary: #CCCCCC;
		--text-muted: #999999;
		--placeholder-color: #666;
		--border: #F0F0F0;
		--success: #00DD66;
		--danger: #FF5588;
		--danger-dark: #FF3366;

		/* Shadows - subtle for dark mode */
		--shadow-sm: 3px 3px 0 rgba(255, 255, 255, 0.12);
		--shadow-md: 4px 4px 0 rgba(255, 255, 255, 0.12);
		--shadow-lg: 6px 6px 0 rgba(255, 255, 255, 0.12);
		--shadow-color: 4px 4px 0 var(--electric-blue);

		/* Background pattern */
		--dot-pattern-color: #2A2A2A;

		/* Inverted sections stay the same (dark bg, light text) */
		--inverted-bg: #0A0A0A;
		--inverted-text: #FFFFFF;
		--inverted-text-muted: rgba(255, 255, 255, 0.7);
		--inverted-text-subtle: rgba(255, 255, 255, 0.5);
		--inverted-border: #FFFFFF;

		/* Subtle borders */
		--border-subtle: rgba(255, 255, 255, 0.1);

		/* Danger background */
		--danger-bg-subtle: rgba(255, 85, 136, 0.15);

		/* Overlay backgrounds */
		--overlay-bg: rgba(0, 0, 0, 0.7);
		--overlay-bg-heavy: rgba(10, 10, 10, 0.9);
	}
}