:root {
    --sa-bg: #f4f7fb;
    --sa-surface: #ffffff;
    --sa-surface-2: #eef4fb;
    --sa-text: #172033;
    --sa-muted: #667085;
    --sa-primary: #0f766e;
    --sa-secondary: #1d4ed8;
    --sa-accent: #f59e0b;
    --sa-primary-contrast: #ffffff;
    --sa-border: #d9e3ef;
    --sa-danger: #dc2626;
    --sa-success: #16a34a;
    --sa-warning: #d97706;
    --sa-shadow: 0 18px 50px rgba(23, 32, 51, .10);
    --sa-radius: 8px;
    --sa-space-1: .25rem;
    --sa-space-2: .5rem;
    --sa-space-3: .75rem;
    --sa-space-4: 1rem;
    --sa-space-5: 1.5rem;
}

[data-theme="dark"] {
    --sa-bg: #101417;
    --sa-surface: #171d22;
    --sa-surface-2: #202830;
    --sa-text: #f5f7fa;
    --sa-muted: #a9b4c3;
    --sa-primary: #2dd4bf;
    --sa-secondary: #60a5fa;
    --sa-accent: #fbbf24;
    --sa-primary-contrast: #082f2c;
    --sa-border: #2c3742;
    --sa-danger: #ef4444;
    --sa-success: #22c55e;
    --sa-warning: #f59e0b;
    --sa-shadow: 0 18px 50px rgba(0, 0, 0, .32);
}

body {
    background-color: var(--sa-bg);
    color: var(--sa-text);
    min-height: 100vh;
}

.sa-header,
.sa-footer {
    background-color: var(--sa-surface);
}

.sa-content {
    padding-block: var(--sa-space-4);
    min-block-size: calc(100vh - 12rem);
    background: var(--sa-bg);
}

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

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

.card,
.modal-content,
.dropdown-menu,
.form-control,
.form-select {
    background-color: var(--sa-surface);
    border-color: var(--sa-border);
    color: var(--sa-text);
}

.table {
    color: var(--sa-text);
}

.sa-card {
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius);
    box-shadow: var(--sa-shadow);
}