:root {
    color-scheme: light;
    --sa-font-main: Inter, "Segoe UI", Arial, sans-serif;
    --sa-font-heading: Georgia, "Times New Roman", serif;
    --sa-color-navy: #0c2150;
    --sa-color-blue: #123c83;
    --sa-color-blue-dark: #0c2d65;
    --sa-color-blue-soft: #f0f4fa;
    --sa-color-text: #233e69;
    --sa-color-muted: #6d82a7;
    --sa-color-border: #e1e8f2;
    --sa-color-bg: #f3f6fa;
    --sa-color-gold: #c5a063;
    --sa-color-primary: #183451;
    --sa-color-primary-hover: #234b74;
    --sa-color-control-border: #d8e2f0;
    --sa-color-control-bg: #fbfcfe;
    --sa-color-table-head: #f5f8fc;
    --sa-color-focus: #728db4;
    --sa-color-card: #ffffff;
    --sa-color-ink: var(--sa-color-navy);
    --sa-color-ink-soft: var(--sa-color-text);
    --sa-color-blue-2: #60A5FA;
    --sa-color-sky: #60A5FA;
    --sa-color-orange: #f59e0b;
    --sa-color-red: #ef4444;
    --sa-color-green: #16834a;
    --sa-color-surface: rgba(255, 255, 255, 0.96);
    --sa-color-surface-strong: var(--sa-color-card);
    --sa-color-page: var(--sa-color-bg);
    --sa-color-line: var(--sa-color-border);
    --sa-shadow-panel: 0 3px 16px rgba(29, 55, 96, 0.025);
    --sa-shadow-control: 0 2px 7px rgba(15, 36, 65, 0.12);
    --sa-radius: 12px;
    --sa-radius-control: 6px;
    --sa-control-height: 38px;
    --sa-sidebar-width: 200px;
    --sa-topbar-height: 56px;
    --sa-space-page: 22px;
    --sa-font-ui: var(--sa-font-main);
    --sa-font-display: var(--sa-font-heading);
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
}

body {
    margin: 0;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a,
input,
select {
    outline-color: var(--sa-color-blue-2);
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--sa-color-focus);
    outline-offset: 3px;
}

button:disabled { cursor: not-allowed; opacity: .55; }