:root {
    --color-dark-bg-primary: #1a1a1a;
    --color-dark-bg-secondary: #2d2d2d;
    --color-dark-text-primary: #ffffff;
    --color-dark-text-secondary: #b3b3b3;
    --color-dark-border: #404040;
    --color-dark-surface: #2a2a2a;
    --color-neutral-black: #000000;
    --color-neutral-gray-1: #343941;
    --color-neutral-gray-2: #676B70;
    --color-neutral-gray-3: #999CA0;
    --color-neutral-gray-4: #CCCECF;
    --color-neutral-gray-5: #C9C2BC;
    --color-neutral-gray-6: #D4CEC9;
    --color-neutral-gray-7: #DFDAD7;
    --color-neutral-gray-8: #E9E7E4;
    --color-neutral-gray-9: #F4F3F2;
    --color-primary-coral: #e67b61;
    --color-primary-green: #7db71f;
    --color-primary-light-gray: #f7f7f9;
    --color-primary-navy: #090f31;
    --color-pink-1: #d50260;
    --color-pink-2: #dd3580;
    --color-pink-3: #e667a0;
    --color-pink-4: #ee9abf;
    --color-pink-5: #f7ccdf;
    --color-teal-1: #0180a0;
    --color-teal-2: #3499b3;
    --color-teal-3: #66bfd1;
    --color-teal-4: #99ccd9;
    --color-teal-5: #cc36ec;

    /* Primary brand colors for easy reference */
    --va-primary: var(--color-primary-green);
    --va-secondary: var(--color-primary-coral);
    --va-dark: var(--color-primary-navy);
    --va-light: var(--color-primary-light-gray);

    /* Gradient system controlled by enable_gradients setting */
    --gradient-primary: var(--va-primary);
    --gradient-secondary: var(--va-secondary);
    --gradient-info: var(--color-teal-2);
    --gradient-warning: var(--color-pink-2);
    --gradient-dark: var(--va-dark);
    --gradient-header: var(--va-dark);
}

/* Dark mode theme */
[data-theme="dark"] {
    --color-bg-primary: #1a1a1a;
    --color-bg-secondary: #2d2d2d;
    --color-text-primary: #ffffff;
    --color-text-secondary: #b3b3b3;
    --color-border: #404040;
    --color-surface: #2a2a2a;

    /* Dark mode semantic colors */
    --bs-body-bg: var(--bg-primary, #1a1a1a);
    --bs-body-color: var(--text-primary, #ffffff);
    --bs-secondary-bg: var(--bg-secondary, #2d2d2d);
    --bs-secondary-color: var(--text-secondary, #b3b3b3);
    --bs-border-color: var(--border, #404040);
}

/* Typography */
h1, h2, h3, h4, h5, h6, .font-header {
    font-family: 'Geomanist Bold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    color: var(--va-dark);
}

body, .font-body {
    font-family: 'Geomanist Light', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--va-dark);
}

/* Gradient-aware component styles */
[data-card="active-users"] {
    background: var(--gradient-primary) !important;
}

[data-card="total-projects"] {
    background: var(--gradient-secondary) !important;
}

[data-card="total-tasks"] {
    background: var(--gradient-info) !important;
}

[data-card="overdue-tasks"] {
    background: var(--gradient-warning) !important;
}

[data-card="total-credits"] {
    background: var(--gradient-primary) !important;
}

[data-card="active-credits"] {
    background: var(--gradient-secondary) !important;
}

[data-card="available-credits"] {
    background: var(--gradient-info) !important;
}

[data-card="credit-packages"] {
    background: var(--gradient-warning) !important;
}

[data-card="preview-primary"] {
    background: var(--gradient-primary) !important;
}

[data-card="preview-secondary"] {
    background: var(--gradient-secondary) !important;
}

[data-card="preview-info"] {
    background: var(--gradient-info) !important;
}

[data-card="preview-warning"] {
    background: var(--gradient-warning) !important;
}

.login-header {
    background: var(--gradient-header) !important;
}

.auth-gradient, .login-gradient {
    background: var(--gradient-header) !important;
}

body.auth-page {
    background: var(--gradient-dark) !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.login-card, .verification-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.login-header, .verification-header {
    background: var(--gradient-header) !important;
    color: white;
    text-align: center;
    padding: 2rem;
}

.login-body, .verification-body {
    padding: 2rem;
}

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

.bg-gradient-success {
    background: var(--gradient-info) !important;
}

.bg-gradient-info {
    background: var(--gradient-info) !important;
}

.bg-gradient-warning {
    background: var(--gradient-warning) !important;
}

/* Advanced CSS Configurations */
.navbar-dark, .navbar {
    background-color: #090F31 !important;
}

.navbar-brand {
    color: #FFFFFF !important;
}

.navbar-nav .nav-link {
    color: #FFFFFF !important;
}

.navbar-nav .nav-link:hover {
    color: #B6EB5F !important;
}

.login-header {
    background: rgb(170 !important;
}

.login-header h1, .login-header h2, .login-header p {
    color: #FFFFFF !important;
}

.card[data-card="active-users"] {
    background: linear-gradient(135deg, #B6EB5F 0%, #3499B3 100%) !important;
    color: #FFFFFF !important;
}

.card[data-card="active-users"] h1, .card[data-card="active-users"] h2, .card[data-card="active-users"] h3, .card[data-card="active-users"] h4, .card[data-card="active-users"] h5, .card[data-card="active-users"] h6,
.card[data-card="active-users"] p, .card[data-card="active-users"] span, .card[data-card="active-users"] div, .card[data-card="active-users"] .card-title, .card[data-card="active-users"] .card-text {
    color: #FFFFFF !important;
}

.card[data-card="total-projects"] {
    background: linear-gradient(135deg, #E67B61 0%, #DD3580 100%) !important;
    color: #FFFFFF !important;
}

.card[data-card="total-projects"] h1, .card[data-card="total-projects"] h2, .card[data-card="total-projects"] h3, .card[data-card="total-projects"] h4, .card[data-card="total-projects"] h5, .card[data-card="total-projects"] h6,
.card[data-card="total-projects"] p, .card[data-card="total-projects"] span, .card[data-card="total-projects"] div, .card[data-card="total-projects"] .card-title, .card[data-card="total-projects"] .card-text {
    color: #FFFFFF !important;
}

.card[data-card="total-tasks"] {
    background: linear-gradient(135deg, #3499B3 0%, #66BFD1 100%) !important;
    color: #FFFFFF !important;
}

.card[data-card="total-tasks"] h1, .card[data-card="total-tasks"] h2, .card[data-card="total-tasks"] h3, .card[data-card="total-tasks"] h4, .card[data-card="total-tasks"] h5, .card[data-card="total-tasks"] h6,
.card[data-card="total-tasks"] p, .card[data-card="total-tasks"] span, .card[data-card="total-tasks"] div, .card[data-card="total-tasks"] .card-title, .card[data-card="total-tasks"] .card-text {
    color: #FFFFFF !important;
}

.card[data-card="overdue-tasks"] {
    background: linear-gradient(135deg, #DD3580 0%, #EE9ABF 100%) !important;
    color: #FFFFFF !important;
}

.card[data-card="overdue-tasks"] h1, .card[data-card="overdue-tasks"] h2, .card[data-card="overdue-tasks"] h3, .card[data-card="overdue-tasks"] h4, .card[data-card="overdue-tasks"] h5, .card[data-card="overdue-tasks"] h6,
.card[data-card="overdue-tasks"] p, .card[data-card="overdue-tasks"] span, .card[data-card="overdue-tasks"] div, .card[data-card="overdue-tasks"] .card-title, .card[data-card="overdue-tasks"] .card-text {
    color: #FFFFFF !important;
}

.btn-primary {
    background-color: #B6EB5F !important;
    border-color: #B6EB5F !important;
    color: #090F31 !important;
}

.btn-primary:hover {
    background-color: #a5d954 !important;
    border-color: #a5d954 !important;
}

.btn-secondary {
    background-color: #E67B61 !important;
    border-color: #E67B61 !important;
    color: #FFFFFF !important;
}

.btn-secondary:hover {
    background-color: #d96b50 !important;
    border-color: #d96b50 !important;
}

.btn-success {
    background-color: #B6EB5F !important;
    border-color: #B6EB5F !important;
    color: #090F31 !important;
}

.btn-danger {
    background-color: #DD3580 !important;
    border-color: #DD3580 !important;
    color: #FFFFFF !important;
}

.bg-primary, .card.bg-primary, div.bg-primary {
    background-color: #090F31 !important;
    color: #FFFFFF !important;
}

.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary h5, .bg-primary h6,
.bg-primary p, .bg-primary span, .bg-primary div, .bg-primary .card-title, .bg-primary .card-text,
.card.bg-primary h1, .card.bg-primary h2, .card.bg-primary h3, .card.bg-primary h4, .card.bg-primary h5, .card.bg-primary h6,
.card.bg-primary p, .card.bg-primary span, .card.bg-primary div, .card.bg-primary .card-title, .card.bg-primary .card-text {
    color: #FFFFFF !important;
}

.bg-success, .card.bg-success, div.bg-success {
    background-color: #B6EB5F !important;
    color: #090F31 !important;
}

.bg-success h1, .bg-success h2, .bg-success h3, .bg-success h4, .bg-success h5, .bg-success h6,
.bg-success p, .bg-success span, .bg-success div, .bg-success .card-title, .bg-success .card-text,
.card.bg-success h1, .card.bg-success h2, .card.bg-success h3, .card.bg-success h4, .card.bg-success h5, .card.bg-success h6,
.card.bg-success p, .card.bg-success span, .card.bg-success div, .card.bg-success .card-title, .card.bg-success .card-text {
    color: #090F31 !important;
}

.bg-info, .card.bg-info, div.bg-info {
    background-color: #3499B3 !important;
    color: #FFFFFF !important;
}

.bg-info h1, .bg-info h2, .bg-info h3, .bg-info h4, .bg-info h5, .bg-info h6,
.bg-info p, .bg-info span, .bg-info div, .bg-info .card-title, .bg-info .card-text,
.card.bg-info h1, .card.bg-info h2, .card.bg-info h3, .card.bg-info h4, .card.bg-info h5, .card.bg-info h6,
.card.bg-info p, .card.bg-info span, .card.bg-info div, .card.bg-info .card-title, .card.bg-info .card-text {
    color: #FFFFFF !important;
}

.bg-warning, .card.bg-warning, div.bg-warning {
    background-color: #E67B61 !important;
    color: #FFFFFF !important;
}

.bg-warning h1, .bg-warning h2, .bg-warning h3, .bg-warning h4, .bg-warning h5, .bg-warning h6,
.bg-warning p, .bg-warning span, .bg-warning div, .bg-warning .card-title, .bg-warning .card-text,
.card.bg-warning h1, .card.bg-warning h2, .card.bg-warning h3, .card.bg-warning h4, .card.bg-warning h5, .card.bg-warning h6,
.card.bg-warning p, .card.bg-warning span, .card.bg-warning div, .card.bg-warning .card-title, .card.bg-warning .card-text {
    color: #FFFFFF !important;
}

.bg-danger, .card.bg-danger, div.bg-danger {
    background-color: #DD3580 !important;
    color: #FFFFFF !important;
}

.bg-danger h1, .bg-danger h2, .bg-danger h3, .bg-danger h4, .bg-danger h5, .bg-danger h6,
.bg-danger p, .bg-danger span, .bg-danger div, .bg-danger .card-title, .bg-danger .card-text,
.card.bg-danger h1, .card.bg-danger h2, .card.bg-danger h3, .card.bg-danger h4, .card.bg-danger h5, .card.bg-danger h6,
.card.bg-danger p, .card.bg-danger span, .card.bg-danger div, .card.bg-danger .card-title, .card.bg-danger .card-text {
    color: #FFFFFF !important;
}

.form-control {
    background-color: #FFFFFF !important;
    color: #090F31 !important;
    border-color: #CCCECF !important;
}

.form-control:focus {
    border-color: #B6EB5F !important;
    box-shadow: 0 0 0 0.2rem rgba(182, 235, 95, 0.25) !important;
}

.form-label, label {
    color: #090F31 !important;
}

.alert-success {
    background-color: #d4edda !important;
    color: #155724 !important;
    border-color: #c3e6cb !important;
}

.alert-danger {
    background-color: #f8d7da !important;
    color: #721c24 !important;
    border-color: #f5c6cb !important;
}

.alert-warning {
    background-color: #fff3cd !important;
    color: #856404 !important;
    border-color: #ffeaa7 !important;
}

.alert-info {
    background-color: #cce7f0 !important;
    color: #055160 !important;
    border-color: #b6d4fe !important;
}

.sidebar, .sidebar-wrapper {
    background-color: #F7F7F9 !important;
}

.sidebar, .sidebar-wrapper {
    color: #090F31 !important;
}

.sidebar .nav-link, .sidebar-wrapper .nav-link {
    color: #676B70 !important;
}

.sidebar .nav-link:hover, .sidebar-wrapper .nav-link:hover {
    background-color: #E9E7E4 !important;
    color: #090F31 !important;
}

.sidebar .nav-link.active, .sidebar-wrapper .nav-link.active {
    background-color: #B6EB5F !important;
    color: #090F31 !important;
}

.footer, footer {
    background-color: #090F31 !important;
}

.footer, footer {
    color: #FFFFFF !important;
}

.footer a, footer a {
    color: #B6EB5F !important;
}

.footer a:hover, footer a:hover {
    color: #a5d954 !important;
}

.table thead th {
    background-color: #F7F7F9 !important;
    color: #090F31 !important;
}

.table tbody tr:nth-child(even) {
    background-color: #FFFFFF !important;
}

.table tbody tr:nth-child(odd) {
    background-color: #F7F7F9 !important;
}

.table tbody td {
    color: #090F31 !important;
}

.table-hover tbody tr:hover {
    background-color: #E9E7E4 !important;
}

.login-card, .verification-card {
    background-color: #FFFFFF !important;
}

.login-body, .verification-body {
    color: #090F31 !important;
}

.login-body .form-control, .verification-body .form-control {
    border-color: #CCCECF !important;
}

.login-body .form-control:focus, .verification-body .form-control:focus {
    border-color: #B6EB5F !important;
    box-shadow: 0 0 0 0.2rem rgba(182, 235, 95, 0.25) !important;
}

.card:not([class*='bg-']) {
    background-color: #FFFFFF !important;
    color: #090F31 !important;
}

.navbar-toggler-icon {
    filter: brightness(0) invert(1);
}

.btn-secondary:hover {
    color: #FFFFFF !important;
}

.btn-primary:hover {
    color: #090F31 !important;
}