/* public/css/theme.css */

/* LIGHT THEME (Default) */
:root {
	/* Brand Colors */
	--color-primary: #0071bc;
	--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 */

}

/* Example Custom Usage */
body {
	background-color: var(--color-bg);
	color: var(--color-text);
}

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

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

.body {
	min-height: 100vh; margin: 0; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); background-repeat: no-repeat; background-size: cover;
}

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;
}

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

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

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

.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;
}

/* For WebKit-based browsers (Chrome, Safari) */
body {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  overflow: auto;
}

body::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}

* {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}

*::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}