:root {
	--primary-color: #6c5ce7; /* Indigo Violet */
	--primary-hover: #5b4cc1;

	--secondary-color: #3a5068; /* Deep Charcoal */
	--secondary-hover: #1f2a36;

	--accent-color: #ff7675; /* Coral Red */
	--accent-hover: #e85c5b;

	--highlight-color: #00cec9; /* Aqua Green */
	--highlight-hover: #00b5b3;

	--darker-gray: #7f8fa6;
	--dark-gray: #dfe6e9;
	--light-gray: #f9fbfd;

	--status-on: #55efc4;
	--status-off: #fab1a0;

	--background-color: var(--light-gray);
	--text-color: #1a222c;
	--text-muted: #636e72;
}

:root.dark {
	--primary-color: #a29bfe; /* Light Lavender Indigo */
	--primary-hover: #7e75dd;

	--accent-color: #d36161; /* Coral Red */
	--accent-hover: #a13f3f;

	--highlight-color: #02aba9; /* Aqua Green */
	--highlight-hover: #018482;

	--darker-gray: #1e272e;
	--dark-gray: #2d3436;
	--light-gray: #636e72;

	--status-on: #14532d;
	--status-off: #842029;

	--background-color: var(--darker-gray);
	--text-color: #dfe6e9;
	--text-muted: #b2bec3;
}

body {
	background-color: var(--background-color);
	color: var(--text-color);
	line-height: 1.6;
	padding: 20px;
	max-width: 800px;
	margin: 0 auto;

	transition: background-color 0.3s ease, color 0.3s ease;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

button:not(.not-base-style) {
	flex: 1;
	min-width: 100px;
	padding: 8px;
	border: none;
	border-radius: 5px;
	font-size: 0.9rem;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.2s ease;
	color: #fff;
	background-color: var(--secondary-color);
}

button:not(.not-base-style):hover {
	background-color: var(--secondary-hover);
}