/* Theme Switching */

/* Light theme (default) */
:root {
  --color-primary: #4A0082;
  --color-primary-light: #02367b;
  --btn-bg: radial-gradient(circle, rgba(0, 110, 255, 1) 0%, rgba(16, 81, 167, 1) 100%);
  --btn-bg-hover: #0e54b1;
  --dark-gradient-bg: radial-gradient(circle, rgba(0, 110, 255, 1) 0%, rgba(16, 81, 167, 1) 100%);
  --black-color: #000;
  --static-black-color: #121212;
  --dark-color: #121212;
  --white-color: #fff;
  --bg-color: #fff;
  --lite-bg: #f6f7ff;
  --grade-from: #6a0dac;
  --grade-to: #a64dff;
  --soft-purple-bg: #e3fafb;
  --medium-purple-bg: #a249fa;
  --semifull-purple-bg: #310061;
  --semi-dark-purple-bg: radial-gradient(circle, rgba(0, 110, 255, 1) 0%, rgba(16, 81, 167, 1) 100%);
  --low-dark-purple-bg: #03abfc;
  --dark-black-bg: #000;
  --off-white-bg: rgba(255, 255, 255, 0.5);
  --static-white-color: #fff;
  --lite-btn-bg: linear-gradient(180deg, rgb(0, 112, 255) 0%, rgb(255, 255, 255) 42%, rgb(255, 255, 255) 54%, rgb(58, 146, 223) 100%);
  --lite-btn-hover-bg: linear-gradient(0deg, rgba(230, 204, 255, 1) 0%, rgba(255, 255, 255, 1) 42%, rgba(255, 255, 255, 1) 54%, rgba(230, 204, 255, 1) 100%);
  --lite-gradient-bg: linear-gradient(180deg, rgba(230, 204, 255, 1) 0%, rgba(255, 255, 255, 1) 42%, rgba(255, 255, 255, 1) 54%, rgba(230, 204, 255, 1) 100%);
  --white-opacity-bg: rgba(0, 0, 0, 0.3);
}

/* Dark theme override */
[data-theme="dark"] {
 --color-primary: #d8b9ff;
 --color-primary-light: #c168ff;
 --white-color: #000;
 --btn-bg: linear-gradient(180deg, #3b0066, #5e0a99);
 --dark-gradient-bg:#c168ff;
 --btn-bg-hover: linear-gradient(180deg, rgba(104, 12, 169, 1) 0%, rgba(74, 0, 130, 1) 100%, rgba(104, 12, 169, 1) 50%);
 --black-color: #fff;
 --static-black-color:#121212;
 --dark-color: #f1f1f1;
 --bg-color: #090010;
 --lite-bg: #1b1525;
 --grade-from: #d8b9ff;
 --grade-to: #f0cfff;
 --soft-purple-bg:#1b1525;
 --medium-purple-bg:#f0cfff;
 --semifull-purple-bg:#f0cfff;
 --low-dark-purple-bg:#a64dff;
 --dark-black-bg:#fff;
 --off-white-bg:#1b1525;
 --lite-btn-bg:linear-gradient(180deg, rgb(204, 239, 255) 0%, rgba(255, 255, 255, 1) 42%, rgba(255, 255, 255, 1) 54%, rgb(204, 239, 255) 100%);

 --static-white-color:#fff;

 --white-opacity-bg:rgba(255, 255, 255, 0.3);
}
body {
	background-color: var(--bg-color) !important;
	color: var(--text-color);
}
.btn-secondary {
  background: #00adff;
  color: #fff !important;
}
.btn-secondary-hover {
	background: var(--lite-btn-hover-bg) !important;
	color: #000000 !important;
}
.btn-primary {
  background: var(--btn-bg);
  color: #fff !important;
}
.btn-primary-hover {
	background: var(--btn-bg-hover) !important;
	color: #fff !important;
}
.dark-grade {
	background: var(--dark-gradient-bg) !important;
}
.bg-transparent {
	background: var(--off-white-bg);
}
.lite-grade {
	background: var(--lite-gradient-bg) !important;
}
.bg-dark {
	background: var(--dark-black-bg);
}
.lite-purple {
	background: var(--soft-purple-bg);
}
.neutral-purple {
	background: var(--medium-purple-bg);
}
.semi-purple {
	background: var(--semifull-purple-bg);
}
.dark-purple {
	background: var(--semi-dark-purple-bg);
}
.low-purple {
	background: var(--low-dark-purple-bg);
}
.stable-white {
	color: var(--static-white-color);
}
.stable-black {
	color: var(--static-black-color);
}
.text-white {
	color: var(--white-color) !important;  /*  white-text */
}
.text-primary {
	color: var(--color-primary-light) !important;  /*  primary-text */
}
.text-black {
	color: var(--black-color) !important;    /*  black-text */
}
.text-dark {
	color: var(--dark-color) !important;    /*  gray-text */
}
.text-grade {
	background: linear-gradient(var(--grade-from), var(--grade-to));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;      /*  grade-text */
}
.fea-box {
	background: var(--lite-bg);
}
.opacity-bg {
	background: var(--white-opacity-bg);
}
/*////////////////////////////////// toggle button for switching ////////////////////////// */




[data-theme="dark"] .logo-dark {
	display:none;
}
[data-theme="dark"] .logo-lite {
	display: inline-block;
}
html, body, * {
	transition: 
 background-color 0.3s ease,  color 0.3s ease,  border-color 0.3s ease,  fill 0.3s ease,  stroke 0.3s ease,  opacity 0.3s ease;
}
.theme-switch {
	display: inline-block;
	width: 67px;
	height: 46px;
	position: fixed;
	left: 0px;
	top: 18%;
	transform: translateY(-50%);
	z-index: 9999;
	box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.2);
	background: #fff;
	border-radius: 0px 15px 015px 0px;
}
.theme-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}
.slider {
	position: absolute;
	cursor: pointer;
	background-color: var(--toggle-bg);
	border-radius: 34px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transition: background-color 0.4s ease;
	height: 80%;
	margin: auto;
	width: 90%;
}
.slider::before {
 content: "";
 position: absolute;
 height: 24px;
 width: 24px;
 left: 3px;
 bottom: 6px;
 background-color: white;
 border-radius: 50%;
 transition: transform 0.4s ease;
 z-index: 1;
}
input:checked + .slider:before {
	transform: translateX(30px);
}
.sun-icon, .moon-icon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	color:var(--white-color);
	z-index: 0;
	pointer-events: none;
}
.sun-icon {
	left: 8px;
}
.moon-icon {
	right: 8px;
}
:root {
 --toggle-bg: #51038c;       /* Purple for light theme */
}
 [data-theme="dark"] {
 --toggle-bg: #e0b3ff;       /* Light lavender or other contrast for dark theme */
}