:root {
    color-scheme: light;
    --surface-page: #f7f8f5;
    --surface-base: #ffffff;
    --surface-raised: #ffffff;
    --surface-subtle: #edf0eb;
    --text-primary: #222b29;
    --text-secondary: #56625f;
    --text-muted: #66716d;
    --border-subtle: #dce2db;
    --border-control: #85918b;
    --action-primary: #245bd4;
    --action-primary-hover: #194ab7;
    --on-action-primary: #ffffff;
    --link: #245bd4;
    --focus-ring: #245bd4;
    --accent: #31725c;
    --success-text: #166534;
    --success-bg: #dcfce7;
    --warning-text: #854d0e;
    --warning-bg: #fef3c7;
    --danger-text: #991b1b;
    --danger-bg: #fee2e2;
    --danger-action: #991b1b;
    --on-danger-action: #ffffff;
    --info-text: #1e40af;
    --info-bg: #dbeafe;
    --overlay: rgb(12 18 32 / 55%);
    --shadow-panel: none; --shadow-menu: 0 16px 48px rgb(20 32 26 / 13%); --brand-watermark: #e4e9df;
    --radius-control: 12px;
    --radius-panel: 16px;
    --radius-dialog: 20px;

    /* Compatibility aliases for components being migrated. */
    --primary-color: var(--action-primary);
    --secondary-color: var(--accent);
    --accent-color: var(--accent);
    --background-color: var(--surface-page);
    --card-background: var(--surface-base);
    --text-default: var(--text-primary);
    --muted-text: var(--text-secondary);
    --text-color: var(--text-primary);
    --button-color: var(--action-primary);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --surface-page: #171c20;
    --surface-base: #1e2529;
    --surface-raised: #283035;
    --surface-subtle: #293136;
    --text-primary: #eff2ef;
    --text-secondary: #b8c2bc;
    --text-muted: #a6b2ab;
    --border-subtle: #39443e;
    --border-control: #77877e;
    --action-primary: #a4bef8;
    --action-primary-hover: #bdd0fc;
    --on-action-primary: #172c53;
    --link: #a4bef8;
    --focus-ring: #a4bef8;
    --accent: #99cbb1;
    --success-text: #86efac;
    --success-bg: #123426;
    --warning-text: #fde68a;
    --warning-bg: #3a2b12;
    --danger-text: #fca5a5;
    --danger-bg: #3c1c24;
    --danger-action: #fca5a5;
    --on-danger-action: #241015;
    --info-text: #bfdbfe;
    --info-bg: #172e50;
    --overlay: rgb(0 0 0 / 68%);
    --shadow-panel: none; --shadow-menu: 0 18px 48px rgb(0 0 0 / 24%); --brand-watermark: #242d31;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --surface-page: #171c20;
        --surface-base: #1e2529;
        --surface-raised: #283035;
        --surface-subtle: #293136;
        --text-primary: #eff2ef;
        --text-secondary: #b8c2bc;
        --text-muted: #a6b2ab;
        --border-subtle: #39443e;
        --border-control: #77877e;
        --action-primary: #a4bef8;
        --action-primary-hover: #bdd0fc;
        --on-action-primary: #172c53;
        --link: #a4bef8;
        --focus-ring: #a4bef8;
        --accent: #99cbb1;
        --success-text: #86efac;
        --success-bg: #123426;
        --warning-text: #fde68a;
        --warning-bg: #3a2b12;
        --danger-text: #fca5a5;
        --danger-bg: #3c1c24;
        --danger-action: #fca5a5;
        --on-danger-action: #241015;
        --info-text: #bfdbfe;
        --info-bg: #172e50;
        --overlay: rgb(0 0 0 / 68%);
        --shadow-panel: none; --shadow-menu: 0 18px 48px rgb(0 0 0 / 24%); --brand-watermark: #242d31;
    }
}