/* LIGHT THEME (Default) */
:root {
	--color-primary: #0071bc;
	--color-primary-rgb: 0 113 188;
	--color-accent: #8dc63f;
	--color-text: #212529;
	--color-muted: #6c757d;
	--color-bg: #ffffff;
	--color-link: var(--color-primary);
	--color-light-bg: #f8f9fa;    /* Very light gray background */
	--color-border: #dee2e6;      /* Light gray border */
	--color-dark-bg: #343a40;     /* Darker background or footer */
	--color-hover: #e2e6ea;       /* Light hover for buttons */
	--color-secondary: #6f42c1;   /* Deep purple for contrast (secondary CTAs) */
	--color-warning: #ffc107;     /* Bright yellow for alerts or highlights */
	--color-error: #dc3545;       /* Strong red for errors */
	--color-success: #28a745;     /* Deep green for success, harmonizes with accent */
	--color-info: #17a2b8;        /* Teal/blue for info messages */
	--color-primary-light: #3393d1;   /* Lighter version of primary */
	--color-primary-dark: #005b99;    /* Darker version of primary */
	--color-accent-light: #aee96d;    /* Lighter version of accent */
	--color-accent-dark: #6da530;     /* Darker version of accent */
	--color-background: rgb(244, 244, 244); /* light gray */
}

/* CSS */
body {
  font-family: 'Inter', sans-serif;
}

.text-primary {
	color: var(--color-primary) !important;
}

.body {
  margin: 0;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  background-repeat: no-repeat;
  background-attachment: fixed; /* keeps it fixed while scrolling */
  background-size: 100% 100vh;  /* lock gradient to viewport height */
}

a {
	color: var(--color-link);
}

.btn-primary {
	background-color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
}
.btn-primary.active {
	background-color: var(--color-accent) !important;
	border-color: var(--color-accent) !important;
}

.btn-primary:hover {
	background-color: var(--color-accent) !important;
	border-color: var(--color-accent) !important;
}

.form-check-input {
	background-color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	accent-color: var(--color-accent) !important;
}

.form-check-input:checked {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  accent-color: var(--color-accent) !important;
}

.btn-outline-primary {
	border-color: var(--bs-primary) !important;
    color: var(--color-primary) !important;
}

.btn-outline-primary:hover {
	border-color: var(--color-accent) !important;
    background-color: var(--color-accent) !important;
    color: var(--color-primary) !important;
}

.btn-outline-primary.active {
    background-color: var(--color-accent) !important;
    color: white !important;
	border-color: var(--color-accent) !important;
}

.bg-primary {
	background-color: var(--color-primary) !important;
}

/* Scalable for Dark Theme */
[data-theme="dark"] {
	--color-primary: #0dcaf0;
	--color-accent: #6cbf3f;
	--color-text: #f8f9fa;
	--color-muted: #adb5bd;
	--color-bg: #121212;
	--color-link: var(--color-primary);

	--bs-primary: var(--color-primary);
	--bs-success: var(--color-accent);
	--bs-body-bg: var(--color-bg);
	--bs-body-color: var(--color-text);
	--bs-link-color: var(--color-link);
}

.nav-item .nav-link:hover {
	background: rgba(0, 255, 242, 0.2);
	border-radius: 5px;
	transition: all 0.5s;
}