:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-inverse: #ffffff;
    --border-color: #dee2e6;
    --shadow-sm: 0 .125rem .25rem rgba(0,0,0,.075);
    --shadow-md: 0 .5rem 1rem rgba(0,0,0,.15);
    --shadow-lg: 0 1rem 3rem rgba(0,0,0,.175);
    --link-color: #0d6efd;
    --link-hover: #0a58ca;
    --success: #198754;
    --danger: #dc3545;
    --warning: #ffc107;
    --info: #0dcaf0;
    --sidebar-bg: #343a40;
    --sidebar-text: #ffffff;
    --sidebar-hover: #495057;
    --card-bg: #ffffff;
    --table-bg: #ffffff;
    --table-stripe: #f8f9fa;
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --btn-primary-bg: #0d6efd;
    --btn-primary-hover: #0b5ed7;
}

[data-theme="dark"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #404040;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-inverse: #1a1a1a;
    --border-color: #404040;
    --shadow-sm: 0 .125rem .25rem rgba(0,0,0,.3);
    --shadow-md: 0 .5rem 1rem rgba(0,0,0,.4);
    --shadow-lg: 0 1rem 3rem rgba(0,0,0,.5);
    --link-color: #4dabf7;
    --link-hover: #339af0;
    --success: #51cf66;
    --danger: #ff6b6b;
    --warning: #ffd43b;
    --info: #74c0fc;
    --sidebar-bg: #0d0d0d;
    --sidebar-text: #e0e0e0;
    --sidebar-hover: #2d2d2d;
    --card-bg: #2d2d2d;
    --table-bg: #2d2d2d;
    --table-stripe: #1a1a1a;
    --input-bg: #2d2d2d;
    --input-border: #404040;
    --btn-primary-bg: #339af0;
    --btn-primary-hover: #228be6;
}

[data-theme="blue"] {
    --bg-primary: #f0f7ff;
    --bg-secondary: #d0e7ff;
    --bg-tertiary: #a6d2ff;
    --text-primary: #002855;
    --text-secondary: #004080;
    --text-inverse: #ffffff;
    --border-color: #a6d2ff;
    --shadow-sm: 0 .125rem .25rem rgba(0,40,85,.1);
    --shadow-md: 0 .5rem 1rem rgba(0,40,85,.15);
    --shadow-lg: 0 1rem 3rem rgba(0,40,85,.2);
    --link-color: #0066cc;
    --link-hover: #0052a3;
    --success: #00875a;
    --danger: #de350b;
    --warning: #ffab00;
    --info: #0065ff;
    --sidebar-bg: #003d7a;
    --sidebar-text: #ffffff;
    --sidebar-hover: #00529f;
    --card-bg: #ffffff;
    --table-bg: #ffffff;
    --table-stripe: #f0f7ff;
    --input-bg: #ffffff;
    --input-border: #a6d2ff;
    --btn-primary-bg: #0066cc;
    --btn-primary-hover: #0052a3;
}

[data-theme="green"] {
    --bg-primary: #f0fdf4;
    --bg-secondary: #dcfce7;
    --bg-tertiary: #bbf7d0;
    --text-primary: #14532d;
    --text-secondary: #166534;
    --text-inverse: #ffffff;
    --border-color: #86efac;
    --shadow-sm: 0 .125rem .25rem rgba(20,83,45,.1);
    --shadow-md: 0 .5rem 1rem rgba(20,83,45,.15);
    --shadow-lg: 0 1rem 3rem rgba(20,83,45,.2);
    --link-color: #16a34a;
    --link-hover: #15803d;
    --success: #16a34a;
    --danger: #dc2626;
    --warning: #ca8a04;
    --info: #0891b2;
    --sidebar-bg: #14532d;
    --sidebar-text: #ffffff;
    --sidebar-hover: #166534;
    --card-bg: #ffffff;
    --table-bg: #ffffff;
    --table-stripe: #f0fdf4;
    --input-bg: #ffffff;
    --input-border: #86efac;
    --btn-primary-bg: #16a34a;
    --btn-primary-hover: #15803d;
}

[data-theme="purple"] {
    --bg-primary: #faf5ff;
    --bg-secondary: #f3e8ff;
    --bg-tertiary: #e9d5ff;
    --text-primary: #581c87;
    --text-secondary: #6b21a8;
    --text-inverse: #ffffff;
    --border-color: #d8b4fe;
    --shadow-sm: 0 .125rem .25rem rgba(88,28,135,.1);
    --shadow-md: 0 .5rem 1rem rgba(88,28,135,.15);
    --shadow-lg: 0 1rem 3rem rgba(88,28,135,.2);
    --link-color: #9333ea;
    --link-hover: #7e22ce;
    --success: #16a34a;
    --danger: #dc2626;
    --warning: #ca8a04;
    --info: #2563eb;
    --sidebar-bg: #581c87;
    --sidebar-text: #ffffff;
    --sidebar-hover: #6b21a8;
    --card-bg: #ffffff;
    --table-bg: #ffffff;
    --table-stripe: #faf5ff;
    --input-bg: #ffffff;
    --input-border: #d8b4fe;
    --btn-primary-bg: #9333ea;
    --btn-primary-hover: #7e22ce;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm);
}

.table {
    background-color: var(--table-bg);
    color: var(--text-primary);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--table-stripe);
}

.table-bordered {
    border-color: var(--border-color);
}

.table-bordered th,
.table-bordered td {
    border-color: var(--border-color);
}

.form-control,
.form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--input-bg);
    border-color: var(--link-color);
    color: var(--text-primary);
}

.btn-primary {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
}

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

.btn-success {
    background-color: var(--success);
    border-color: var(--success);
}

.btn-danger {
    background-color: var(--danger);
    border-color: var(--danger);
}

.btn-warning {
    background-color: var(--warning);
    border-color: var(--warning);
    color: var(--text-primary);
}

.btn-info {
    background-color: var(--info);
    border-color: var(--info);
}

.alert-success {
    background-color: var(--success);
    color: var(--text-inverse);
    border-color: var(--success);
}

.alert-danger {
    background-color: var(--danger);
    color: var(--text-inverse);
    border-color: var(--danger);
}

.alert-warning {
    background-color: var(--warning);
    color: var(--text-primary);
    border-color: var(--warning);
}

.alert-info {
    background-color: var(--info);
    color: var(--text-inverse);
    border-color: var(--info);
}

.sidebar {
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
}

.sidebar a {
    color: var(--sidebar-text);
}

.sidebar a:hover {
    background-color: var(--sidebar-hover);
}

.nav-link {
    color: var(--link-color);
}

.nav-link:hover {
    color: var(--link-hover);
}

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

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

.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.shadow {
    box-shadow: var(--shadow-md) !important;
}

.shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

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

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

.modal-content {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

.modal-header {
    border-bottom-color: var(--border-color);
}

.modal-footer {
    border-top-color: var(--border-color);
}

.dropdown-menu {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

.dropdown-item {
    color: var(--text-primary);
}

.dropdown-item:hover {
    background-color: var(--bg-secondary);
}

.pagination .page-link {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--link-color);
}

.pagination .page-item.active .page-link {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
}

.breadcrumb {
    background-color: var(--bg-secondary);
}

.list-group-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.badge {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}