/* EMS design tokens. Global (not scoped) so DevExpress popups rendered at <body> level see them too.
   Resolution: client brand override (--ems-brand-*) -> Fluent token -> Bootstrap token -> fallback. See ADR 0004/0005. */
html:root {
    --ems-accent: var(--ems-brand-accent, var(--dxds-color-surface-primary-default-rest, var(--bs-primary, #236DB4)));
    --ems-accent-subtle: var(--ems-brand-accent-subtle, color-mix(in srgb, var(--ems-accent) 12%, var(--ems-surface)));
    --ems-accent-text: var(--ems-brand-accent-text, var(--dxds-color-content-primary-default-rest, var(--bs-primary-text-emphasis, #1B5A96)));
    --ems-surface: var(--ems-brand-surface, var(--dxds-color-surface-neutral-default-rest, var(--bs-body-bg, #FFFFFF)));
    --ems-surface-subtle: var(--ems-brand-surface-subtle, var(--dxds-color-surface-neutral-subdued-rest, var(--bs-tertiary-bg, #F6F8FB)));
    --ems-text: var(--ems-brand-text, var(--dxds-color-content-neutral-default-rest, var(--bs-body-color, #1D2633)));
    --ems-text-subtle: var(--ems-brand-text-subtle, var(--dxds-color-content-neutral-subdued-rest, var(--bs-secondary-color, #667085)));
    --ems-border: var(--ems-brand-border, var(--dxds-color-border-neutral-default-rest, var(--bs-border-color, #E4E7EC)));
    --ems-success: var(--ems-brand-success, var(--dxds-color-content-success-default-rest, var(--bs-success-text-emphasis, #067647)));
    --ems-success-bg: var(--ems-brand-success-bg, color-mix(in srgb, var(--ems-success) 12%, var(--ems-surface)));
    --ems-warning: var(--ems-brand-warning, var(--dxds-color-content-warning-default-rest, var(--bs-warning-text-emphasis, #B54708)));
    --ems-warning-bg: var(--ems-brand-warning-bg, color-mix(in srgb, var(--ems-warning) 12%, var(--ems-surface)));
    --ems-danger: var(--ems-brand-danger, var(--dxds-color-content-danger-default-rest, var(--bs-danger-text-emphasis, #B42318)));
    --ems-danger-bg: var(--ems-brand-danger-bg, color-mix(in srgb, var(--ems-danger) 12%, var(--ems-surface)));
    --ems-info: var(--ems-brand-info, var(--dxds-color-content-info-default-rest, var(--bs-info-text-emphasis, #1B5A96)));
    --ems-info-bg: var(--ems-brand-info-bg, color-mix(in srgb, var(--ems-info) 12%, var(--ems-surface)));

    /* Shell: the sidebar stays dark in both modes; canvas and header follow the theme. */
    --ems-page-bg: var(--ems-brand-page-bg, var(--ems-surface-subtle));
    --ems-header-bg: var(--ems-brand-header-bg, color-mix(in srgb, var(--ems-surface) 86%, transparent));
    --ems-sidebar-bg: var(--ems-brand-sidebar-bg, #172231);
    --ems-sidebar-text: var(--ems-brand-sidebar-text, #D5DCE6);
    --ems-sidebar-text-subtle: var(--ems-brand-sidebar-text-subtle, #7F8DA1);
    --ems-sidebar-active-bg: var(--ems-brand-sidebar-active-bg, color-mix(in srgb, var(--ems-accent) 28%, transparent));
    --ems-sidebar-active-text: var(--ems-brand-sidebar-active-text, #FFFFFF);

    /* Categorical palette for charts, KPI icons and tracks. */
    --ems-data-1: var(--ems-brand-data-1, #236DB4);
    --ems-data-2: var(--ems-brand-data-2, #049949);
    --ems-data-3: var(--ems-brand-data-3, #F9B21D);
    --ems-data-4: var(--ems-brand-data-4, #E42527);
    --ems-data-5: var(--ems-brand-data-5, #7A5AF8);
    --ems-data-6: var(--ems-brand-data-6, #0E9DB0);

    --ems-font-family: var(--ems-brand-font-family, Inter, "Segoe UI", system-ui, sans-serif);
    --ems-font-size: var(--ems-brand-font-size, 14px);
    --ems-radius-sm: var(--ems-brand-radius-sm, 4px);
    --ems-radius: var(--ems-brand-radius, 6px);
    --ems-radius-lg: var(--ems-brand-radius-lg, 10px);
    --ems-shadow-sm: 0 1px 2px rgb(16 24 40 / 0.05);
    --ems-shadow: var(--ems-brand-shadow, 0 1px 3px rgb(16 24 40 / 0.06), 0 1px 2px rgb(16 24 40 / 0.04));
    --ems-shadow-lg: 0 12px 24px -6px rgb(16 24 40 / 0.12), 0 4px 8px -4px rgb(16 24 40 / 0.06);
    --ems-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ems-accent) 30%, transparent);
    --ems-transition: 150ms cubic-bezier(0.2, 0, 0, 1);
    --ems-space-1: 4px;
    --ems-space-2: 8px;
    --ems-space-3: 12px;
    --ems-space-4: 16px;
    --ems-space-5: 24px;
    --ems-space-6: 32px;
    --ems-content-max: 1360px;

    /* Push EMS shape onto every DevExpress control so EMS and DevExpress corners match. */
    --dxds-border-radius-20: var(--ems-radius-sm);
    --dxds-border-radius-30: var(--ems-radius-sm);
    --dxds-border-radius-40: var(--ems-radius);
    --dxds-border-radius-60: var(--ems-radius);
    --dxds-border-radius-80: var(--ems-radius-lg);
}

@media (prefers-reduced-motion: reduce) {
    html:root {
        --ems-transition: 0ms linear;
    }
}