:root {
    --sl-color-navy: #080e2c;
    --sl-color-blue: #2c82c9;
    --sl-color-cyan: #38eefc;
    --sl-color-coral: #f2784b;
    --sl-color-white: #fff;
    --sl-color-ink: var(--sl-color-navy);
    --sl-color-primary: #20669f;
    --sl-color-accent: var(--sl-color-cyan);
    --sl-color-warm: var(--sl-color-coral);
    --sl-color-surface: var(--sl-color-white);
    --sl-color-text: #202940;
    --sl-color-muted: #536078;
    --sl-color-background: #f3f5f8;
    --sl-color-border: #c6ceda;
    --sl-color-input-border: #78869b;
    --sl-color-success: #176044;
    --sl-color-success-bg: #eaf5ef;
    --sl-color-info: #205577;
    --sl-color-info-bg: #eaf3fa;
    --sl-color-warning: #73500b;
    --sl-color-warning-bg: #fff5db;
    --sl-color-danger: #a02536;
    --sl-color-danger-bg: #fbeef0;
    --sl-focus-ring: 0 0 0 0.25rem rgb(56 238 252 / 55%);
    --sl-space-1: 0.25rem;
    --sl-space-2: 0.5rem;
    --sl-space-3: 0.75rem;
    --sl-space-4: 1rem;
    --sl-space-5: 1.5rem;
    --sl-space-6: 2rem;
    --sl-space-7: 3rem;
    --sl-radius-sm: 0.375rem;
    --sl-radius: 0.625rem;
    --sl-shadow: 0 2px 8px rgb(8 14 44 / 5%);
    --sl-font-small: 0.875rem;
    --sl-font-body: 1rem;
    --sl-font-heading: 1.25rem;
    --sl-font-title: 1.75rem;
    --sl-font-public-title: 2rem;
    --sl-content-width: 72rem;
    --sl-reading-width: 46rem;
    --sl-transition: 120ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    :root { --sl-transition: 0s; }
}