:root {
    color-scheme: light;
    --sa-font-main: Inter, "Segoe UI", Arial, sans-serif;
    --sa-font-heading: Georgia, "Times New Roman", serif;
    --sa-color-navy: #0b2456;
    --sa-color-blue: #2563EB;
    --sa-color-blue-dark: #1F4ED8;
    --sa-color-blue-soft: #f0f4fa;
    --sa-color-text: #233e69;
    --sa-color-muted: #6e85a8;
    --sa-color-border: #e0e7f1;
    --sa-color-bg: #f3f6fa;
    --sa-color-gold: #c4a064;
    --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(23, 45, 78, 0.035);
    --sa-shadow-control: 0 3px 8px rgba(23, 45, 78, 0.12);
    --sa-radius: 10px;
    --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 {
    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 #7c9ac3;
    outline-offset: 3px;
}

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