:root {
    /* Brand palette */
    --color-brand-soft: #9dc1ed;
    --color-brand-light: #6ea1de;
    --color-brand-mid: #4a86ce;
    --color-brand-dark: #2b6ebe;
    --color-brand-deep: #0c52a6;

    /* Aliases */
    --brand-soft: var(--color-brand-soft);
    --brand-light: var(--color-brand-light);
    --brand-mid: var(--color-brand-mid);
    --brand-dark: var(--color-brand-dark);
    --brand-deep: var(--color-brand-deep);

    /* UI tokens — light */
    --app-bg: #eef3f9;
    --app-text: #1e3a5f;
    --app-muted: #6b849e;
    --app-border: #d5e4f5;
    --app-surface: #ffffff;
    --app-surface-soft: #f5f9fd;
    --app-topbar: rgba(255, 255, 255, 0.9);
    --sidebar-width: 260px;
    --card-shadow: 0 8px 24px rgba(12, 82, 166, 0.08);
}

html.dark {
    --app-bg: #0b1726;
    --app-text: #e7eef8;
    --app-muted: #9bb0c9;
    --app-border: #24364d;
    --app-surface: #122033;
    --app-surface-soft: #182840;
    --app-topbar: rgba(18, 32, 51, 0.92);
    --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);

    --brand-deep: #9dc1ed;
    --brand-dark: #6ea1de;
    --brand-mid: #4a86ce;
}