:root {
    color-scheme: light;
    --oa-bg: #fff;
    --oa-panel: #fff;
    --oa-surface: #f8fafc;
    --oa-hover: #eef2f6;
    --oa-ink: #0f172a;
    --oa-text: #334155;
    --oa-muted: #5d6d82;
    --oa-border: #e2e8f0;
    --oa-border-strong: #cbd5e1;
    --oa-nav-bg: #17263a;
    --oa-nav-hover: #22354e;
    --oa-nav-border: #314257;
    --oa-nav-text: #e2e8f0;
    --oa-nav-muted: #afbed1;
    --oa-nav-selected: #3b3022;
    --oa-nav-highlight: #fcd38a;
    --oa-accent: #92400e;
    --oa-accent-soft: #fff7e8;
    --oa-accent-border: #f3d395;
    --oa-focus: #a65b10;
    --oa-success: #047857;
    --oa-success-bg: #ecfdf5;
    --oa-danger: #be123c;
    --oa-danger-bg: #fff1f2;
    --oa-action-primary: #214c77;
    --oa-primary-text: var(--oa-action-primary);
    --oa-action-primary-hover: #193d63;
    --oa-stat-surface: #edf4fb;
    --oa-stat-border: #d6e3f0;
    --oa-action-secondary: var(--oa-panel);
    --oa-action-secondary-hover: var(--oa-hover);
    --oa-action-danger: #a61538;
    --oa-action-danger-hover: #881331;
    --oa-action-height: 32px;
    --oa-action-radius: 7px;
    --oa-font: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    --oa-shadow: 0 3px 16px rgb(15 23 42 / 4%);
    --oa-dialog-shadow: 0 16px 48px rgb(15 23 42 / 18%);
    --oa-dialog-radius: 12px;
    --oa-dialog-backdrop: rgb(15 23 42 / 32%);
    --oa-dialog-bar-padding: 10px 14px;
    --oa-panel-radius: 16px;
    --oa-control-radius: 8px;
    --oa-info: #264d85;
    --oa-info-bg: #e8effc;
    --oa-edit-surface: #fffcf4;
    --oa-edit-selected: #feebc6;
    --oa-link: #175997;
}

@media screen {
    :root[data-oa-theme="dark"] {
        color-scheme: dark;
        --oa-bg: #111925;
        --oa-panel: #182334;
        --oa-surface: #202d40;
        --oa-hover: #2a3b52;
        --oa-ink: #edf3fb;
        --oa-text: #ccd8e7;
        --oa-muted: #a5b5ca;
        --oa-border: #35465d;
        --oa-border-strong: #536a86;
        --oa-nav-bg: #0d1420;
        --oa-nav-hover: #1d2b40;
        --oa-nav-border: #29384e;
        --oa-nav-text: #e4ecf8;
        --oa-nav-muted: #aabbd0;
        --oa-nav-selected: #3b2d21;
        --oa-nav-highlight: #ffd493;
        --oa-accent: #ffd493;
        --oa-accent-soft: #392d25;
        --oa-accent-border: #745637;
        --oa-focus: #ffbb72;
        --oa-success: #91e3b5;
        --oa-success-bg: #1a3b32;
        --oa-danger: #ffadb8;
        --oa-danger-bg: #452832;
        --oa-action-primary: #315f95;
        --oa-action-primary-hover: #3e70a8;
        --oa-primary-text: #a9d2ff;
        --oa-action-danger: #a53b56;
        --oa-action-danger-hover: #b64964;
        --oa-stat-surface: #1e3048;
        --oa-stat-border: #3c5471;
        --oa-info: #b0d2ff;
        --oa-info-bg: #203a58;
        --oa-edit-surface: #24262d;
        --oa-edit-selected: #463922;
        --oa-link: #9ecbff;
        --oa-shadow: 0 3px 16px rgb(0 0 0 / 24%);
        --oa-dialog-shadow: 0 16px 48px rgb(0 0 0 / 50%);
        --oa-dialog-backdrop: rgb(0 0 0 / 55%);
        background-color: var(--oa-bg);
    }
}

.oa-shell :focus-visible,
.oa-staff :focus-visible {
    outline: 2px solid var(--oa-focus);
    outline-offset: -2px;
}