/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  ZENITH OS - THEME CONFIGURATIONS                                       ║
   ║  System Color Schemes and Visual Modes                                  ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════════════════════════
   DEFAULT THEME - Phosphor Green Terminal
   ═══════════════════════════════════════════════════════════════════════════ */

:root.default {
	--background-color: #000000;
	--header-active-background-color: rgba(0, 255, 65, 0.25);
	--header-hover-background-color: rgba(0, 255, 65, 0.1);
	--input-background-color: #000000;
	--border-color: #00ff41;
	--text-color: #00ff41;
	--hover-text-color: rgba(0, 255, 65, 0.7);
	--active-text-color: #00ff41;
	--utility-background-color: #000000;
	--utility-shadow-color: rgba(0, 255, 65, 0.2);
	--hr-background: rgba(0, 255, 65, 0.3);
	--navbar-background-color: #000000;
	--page-text-color: rgba(0, 255, 65, 0.6);
	--shortcut-background-color: #000000;
	--shortcut-box-shadow: 0 0 30px rgba(0, 255, 65, 0.4);
	--image-outline-color: #00ff41;
	--button-background-color: transparent;
	--button-gradient-color: linear-gradient(135deg, rgba(0, 255, 65, 0.2) 0%, transparent 100%);
	--scrolltop-background-color: rgba(0, 10, 5, 0.9);
	--scrolltop-backdrop-filter: blur(10px);
	--random-btn-background-color: #000000;
	--random-btn-hover-background-color: rgba(0, 255, 65, 0.1);
	--random-btn-active-background-color: rgba(0, 255, 65, 0.15);
	--settingsection-background-color: #020502;
	--settingsection-background-color-hover: rgba(0, 255, 65, 0.05);
	--link-hover-color: #00ff41;
	--settingsection-hr-background: rgba(0, 255, 65, 0.2);
	--button-reg-background-color: #000000;
	--button-reg-hover-background-color: rgba(0, 255, 65, 0.1);
	--button-reg-active-background-color: rgba(0, 255, 65, 0.15);
	--dropdown-background-color: #000000;
	--dropdown-hover-background-color: rgba(0, 255, 65, 0.1);
	--panic-key-successful-color: #00ff41;
	--panic-key-failed-color: #ff003c;
	--failtoast-background: #000000;
	--failtoast-gradient: linear-gradient(135deg, rgba(255, 0, 60, 0.1) 0%, transparent 100%);
	--toast-background: #000000;
	--toast-gradient: linear-gradient(135deg, rgba(0, 255, 65, 0.1) 0%, transparent 100%);
	--slider-background-color: #00ff41;
	--slider-box-shadow: 0 0 15px rgba(0, 255, 65, 0.5);
	--checkbox-background-color: #00ff41;
	--checkbox-gradient: linear-gradient(135deg, #00ff41 0%, #00cc33 100%);
	--password-background-color: #000000;
	--password-hover-background-color: #020502;
	--color-header: #00ff41;
	--accent-color: linear-gradient(135deg, rgba(0, 255, 65, 0.3) 0%, rgba(0, 200, 50, 0.2) 100%);
	--dshadow1: rgba(0, 255, 65, 0.3);
	--dshadow2: rgba(0, 255, 65, 0.2);
	--dshadow3: rgba(0, 255, 65, 0.4);
	--dshadow4: rgba(0, 255, 65, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   AMBER THEME - Vintage Amber Phosphor
   ═══════════════════════════════════════════════════════════════════════════ */

:root.amber {
	--background-color: #0a0500;
	--header-active-background-color: rgba(255, 176, 0, 0.25);
	--header-hover-background-color: rgba(255, 176, 0, 0.1);
	--input-background-color: #0a0500;
	--border-color: #ffb000;
	--text-color: #ffb000;
	--hover-text-color: rgba(255, 176, 0, 0.7);
	--active-text-color: #ffb000;
	--utility-background-color: #0a0500;
	--utility-shadow-color: rgba(255, 176, 0, 0.2);
	--hr-background: rgba(255, 176, 0, 0.3);
	--navbar-background-color: #0a0500;
	--page-text-color: rgba(255, 176, 0, 0.6);
	--shortcut-background-color: #0a0500;
	--shortcut-box-shadow: 0 0 30px rgba(255, 176, 0, 0.4);
	--image-outline-color: #ffb000;
	--button-background-color: transparent;
	--button-gradient-color: linear-gradient(135deg, rgba(255, 176, 0, 0.2) 0%, transparent 100%);
	--link-hover-color: #ffb000;
	--slider-background-color: #ffb000;
	--checkbox-background-color: #ffb000;
	--dshadow1: rgba(255, 176, 0, 0.3);
	--dshadow2: rgba(255, 176, 0, 0.2);
	--dshadow3: rgba(255, 176, 0, 0.4);
	--dshadow4: rgba(255, 176, 0, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CYAN THEME - Cool Blue Terminal
   ═══════════════════════════════════════════════════════════════════════════ */

:root.cyan {
	--background-color: #000508;
	--header-active-background-color: rgba(0, 255, 255, 0.25);
	--header-hover-background-color: rgba(0, 255, 255, 0.1);
	--input-background-color: #000508;
	--border-color: #00ffff;
	--text-color: #00ffff;
	--hover-text-color: rgba(0, 255, 255, 0.7);
	--active-text-color: #00ffff;
	--utility-background-color: #000508;
	--utility-shadow-color: rgba(0, 255, 255, 0.2);
	--hr-background: rgba(0, 255, 255, 0.3);
	--navbar-background-color: #000508;
	--page-text-color: rgba(0, 255, 255, 0.6);
	--shortcut-background-color: #000508;
	--shortcut-box-shadow: 0 0 30px rgba(0, 255, 255, 0.4);
	--image-outline-color: #00ffff;
	--button-background-color: transparent;
	--button-gradient-color: linear-gradient(135deg, rgba(0, 255, 255, 0.2) 0%, transparent 100%);
	--link-hover-color: #00ffff;
	--slider-background-color: #00ffff;
	--checkbox-background-color: #00ffff;
	--dshadow1: rgba(0, 255, 255, 0.3);
	--dshadow2: rgba(0, 255, 255, 0.2);
	--dshadow3: rgba(0, 255, 255, 0.4);
	--dshadow4: rgba(0, 255, 255, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RED ALERT THEME - Warning Mode
   ═══════════════════════════════════════════════════════════════════════════ */

:root.red {
	--background-color: #080000;
	--header-active-background-color: rgba(255, 0, 60, 0.25);
	--header-hover-background-color: rgba(255, 0, 60, 0.1);
	--input-background-color: #080000;
	--border-color: #ff003c;
	--text-color: #ff003c;
	--hover-text-color: rgba(255, 0, 60, 0.7);
	--active-text-color: #ff003c;
	--utility-background-color: #080000;
	--utility-shadow-color: rgba(255, 0, 60, 0.2);
	--hr-background: rgba(255, 0, 60, 0.3);
	--navbar-background-color: #080000;
	--page-text-color: rgba(255, 0, 60, 0.6);
	--shortcut-background-color: #080000;
	--shortcut-box-shadow: 0 0 30px rgba(255, 0, 60, 0.4);
	--image-outline-color: #ff003c;
	--button-background-color: transparent;
	--button-gradient-color: linear-gradient(135deg, rgba(255, 0, 60, 0.2) 0%, transparent 100%);
	--link-hover-color: #ff003c;
	--slider-background-color: #ff003c;
	--checkbox-background-color: #ff003c;
	--dshadow1: rgba(255, 0, 60, 0.3);
	--dshadow2: rgba(255, 0, 60, 0.2);
	--dshadow3: rgba(255, 0, 60, 0.4);
	--dshadow4: rgba(255, 0, 60, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PURPLE THEME - Synthwave Mode
   ═══════════════════════════════════════════════════════════════════════════ */

:root.purple {
	--background-color: #050008;
	--header-active-background-color: rgba(180, 0, 255, 0.25);
	--header-hover-background-color: rgba(180, 0, 255, 0.1);
	--input-background-color: #050008;
	--border-color: #b400ff;
	--text-color: #b400ff;
	--hover-text-color: rgba(180, 0, 255, 0.7);
	--active-text-color: #b400ff;
	--utility-background-color: #050008;
	--utility-shadow-color: rgba(180, 0, 255, 0.2);
	--hr-background: rgba(180, 0, 255, 0.3);
	--navbar-background-color: #050008;
	--page-text-color: rgba(180, 0, 255, 0.6);
	--shortcut-background-color: #050008;
	--shortcut-box-shadow: 0 0 30px rgba(180, 0, 255, 0.4);
	--image-outline-color: #b400ff;
	--button-background-color: transparent;
	--button-gradient-color: linear-gradient(135deg, rgba(180, 0, 255, 0.2) 0%, transparent 100%);
	--link-hover-color: #b400ff;
	--slider-background-color: #b400ff;
	--checkbox-background-color: #b400ff;
	--dshadow1: rgba(180, 0, 255, 0.3);
	--dshadow2: rgba(180, 0, 255, 0.2);
	--dshadow3: rgba(180, 0, 255, 0.4);
	--dshadow4: rgba(180, 0, 255, 0.15);
}