:root {
    --app-bg: #eef2ff;
    --app-surface: #ffffff;
    --app-surface-soft: #f8fafc;
    --app-border: #cbd5e1;
    --app-text: #0f172a;
    --app-muted: #475569;
    --app-primary: #1d4ed8;
    --app-success: #047857;
    --app-warning: #b45309;
    --app-danger: #b91c1c;
    --app-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

body {
    background: linear-gradient(180deg, #eaf0ff 0%, #f8fafc 42%, #fefefe 100%);
}

.card,
.modal-content,
.dropdown-menu,
.table,
.alert {
    border-color: var(--app-border) !important;
}

.card,
.modal-content {
    box-shadow: var(--app-shadow);
}

.table thead th {
    background: #dbeafe;
    color: #1e3a8a;
    border-bottom-width: 2px;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: #f8fafc;
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: #e0ecff;
}

.form-control,
.form-select {
    border: 1px solid #94a3b8;
    background: #fff;
}

.form-control:focus,
.form-select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.22);
}

/* Only style light surfaces, avoid overriding dark preview text */
.card:not(.bg-dark) .text-muted,
.modal-content:not(.bg-dark) .text-muted,
.alert:not(.alert-dark) .text-muted {
    color: #64748b !important;
}