:root {
    --app-font-size: 0.8125rem;
    --app-font-size-sm: 0.75rem;
    --app-control-height: 2rem;
    --app-control-height-sm: 1.75rem;
    --app-radius: 0.375rem;
    --app-radius-sm: 0.25rem;
    --app-space-1: 0.25rem;
    --app-space-2: 0.5rem;
    --app-space-3: 0.75rem;
    --app-space-4: 1rem;
    --app-space-5: 1.25rem;
    --app-border: var(--bs-border-color, #e2e5ea);
    --app-border-strong: #c5cad3;
    --app-surface: #ffffff;
    --app-surface-muted: #f6f7fa;
    --app-surface-input: #ffffff;
    --app-surface-readonly: #eef1f6;
    --app-table-header-bg: #e2e8f0;
    --app-table-footer-bg: #e8eef6;
    --app-text: var(--bs-body-color, #343a40);
    --app-text-muted: var(--bs-secondary-color, #74788d);
    --app-primary: var(--bs-primary, #556ee6);
    --app-danger: var(--bs-danger, #f46a6a);
    --app-warning-surface: #fff9d6;
    --app-focus: rgba(85, 110, 230, 0.18);
    --app-shadow-sm: 0 1px 2px rgba(18, 38, 63, 0.05);
    --app-shadow-md: 0 0.5rem 1.25rem rgba(18, 38, 63, 0.09);
    --app-z-sticky: 20;
    --app-z-loader: 1080;
    --app-z-modal-dropdown: 1060;
}

body.dark-mode-switch {
    --app-border: #3b4254;
    --app-border-strong: #50596d;
    --app-surface: #262b3c;
    --app-surface-muted: #2a3042;
    --app-surface-input: #2e3548;
    --app-surface-readonly: #232838;
    --app-table-header-bg: #32394e;
    --app-table-footer-bg: #2e3548;
    --app-text: #e9ecef;
    --app-text-muted: #a6b0cf;
    --app-warning-surface: #514b2d;
    --app-focus: rgba(116, 140, 255, 0.28);
}