/*
 * Canonical Lumicent theme
 *
 * Keep application code coupled to --theme-* semantic tokens, not to a UI
 * library. The --color-sf-* and legacy --cogo-* sections below are adapters.
 * New Syncfusion components therefore inherit the Lumicent core palette while
 * existing controls migrate incrementally. Version-specific vendor exceptions
 * stay together at the bottom of this file.
 *
 * Light is the only supported theme today. A future [data-theme="dark"] block
 * should override the --theme-* values; the vendor and legacy adapters will
 * continue to resolve through the same semantic names.
 */
:root {
    color-scheme: only light;

    /* Fixed Lumicent brand identity. App.razor supplies --brand-primary-color
       from LumicentTheme.PrimaryColor so Fluent and application CSS cannot drift. */
    --brand-font-family: "Inter", "Segoe UI", "Arial", sans-serif;
    --brand-secondary-color: #00ffcc;

    /* Legacy CoGo palette retained for components that have not yet been mapped
       to Lumicent semantic colors. These values are not Lumicent brand tokens. */
    --legacy-cogo-green-color: #00bc94;
    --legacy-cogo-teal-color: #30e5d0;
    --legacy-cogo-light-blue-color: #49aae5;

    /* Typography and foregrounds */
    --theme-text-primary-color: #181a20;
    --theme-text-secondary-color: #3f4349;
    --theme-text-muted-color: #71747a;
    --theme-text-disabled-color: #a2a4a9;
    --theme-text-inverse-color: #ffffff;

    /* Surfaces and borders */
    --theme-surface-page-color: #e7e8e9;
    --theme-surface-default-color: #ffffff;
    --theme-surface-subtle-color: #fafafb;
    --theme-surface-list-selected-color: #f4f5f5;
    --theme-surface-muted-color: #f4f5f5;
    --theme-surface-hover-color: color-mix(in srgb, var(--brand-primary-color) 6%, var(--theme-surface-default-color));
    --theme-surface-pressed-color: color-mix(in srgb, var(--brand-primary-color) 12%, var(--theme-surface-default-color));
    --theme-surface-selected-color: color-mix(in srgb, var(--brand-primary-color) 10%, var(--theme-surface-default-color));
    --theme-surface-navigation-active-color: #f3f4f6;
    --theme-border-default-color: #d4d6d8;
    --theme-border-muted-color: #e7e8e9;
    --theme-border-strong-color: #71747a;

    /* Primary action states */
    --theme-action-primary-rest-color: var(--brand-primary-color);
    --theme-action-primary-hover-color: color-mix(in srgb, var(--brand-primary-color) 88%, var(--theme-surface-default-color));
    --theme-action-primary-pressed-color: color-mix(in srgb, var(--brand-primary-color) 76%, var(--theme-surface-default-color));
    --theme-action-primary-selected-color: color-mix(in srgb, var(--brand-primary-color) 82%, var(--theme-surface-default-color));
    --theme-action-primary-disabled-color: color-mix(in srgb, var(--brand-primary-color) 40%, var(--theme-surface-default-color));
    --theme-action-primary-light-color: color-mix(in srgb, var(--brand-primary-color) 28%, var(--theme-surface-default-color));
    --theme-action-primary-lighter-color: color-mix(in srgb, var(--brand-primary-color) 10%, var(--theme-surface-default-color));
    /* Lighter step of the brand hue. The -hover- ramp desaturates towards the
       surface; this one keeps the saturation the brand marks call for. */
    --theme-action-primary-emphasis-color: #320075;
    /* Keyboard focus ring. Must stay distinguishable against both the primary
       action fill and the page surface. */
    --theme-focus-ring-color: #8753c7;

    /* Categorical accents distinguish concepts without implying status. */
    --theme-category-primary-color: var(--brand-primary-color);
    --theme-category-secondary-color: color-mix(in srgb, var(--legacy-cogo-green-color) 62%, var(--theme-text-primary-color));

    /* Status colors */
    --theme-status-success-color: #15803d;
    --theme-status-information-color: #4f46e5;
    --theme-status-warning-color: #ee8e4e;
    --theme-status-danger-color: #dc2626;
    --theme-status-success-hover-color: color-mix(in srgb, var(--theme-status-success-color) 88%, var(--theme-text-primary-color));
    --theme-status-information-hover-color: color-mix(in srgb, var(--theme-status-information-color) 88%, var(--theme-text-primary-color));
    --theme-status-warning-hover-color: color-mix(in srgb, var(--theme-status-warning-color) 88%, var(--theme-text-primary-color));
    --theme-status-danger-hover-color: color-mix(in srgb, var(--theme-status-danger-color) 88%, var(--theme-text-primary-color));
    --theme-status-success-pressed-color: color-mix(in srgb, var(--theme-status-success-color) 72%, var(--theme-text-primary-color));
    --theme-status-information-pressed-color: color-mix(in srgb, var(--theme-status-information-color) 72%, var(--theme-text-primary-color));
    --theme-status-warning-pressed-color: color-mix(in srgb, var(--theme-status-warning-color) 72%, var(--theme-text-primary-color));
    --theme-status-danger-pressed-color: color-mix(in srgb, var(--theme-status-danger-color) 72%, var(--theme-text-primary-color));
    --theme-status-success-light-color: color-mix(in srgb, var(--theme-status-success-color) 65%, var(--theme-surface-default-color));
    --theme-status-information-light-color: color-mix(in srgb, var(--theme-status-information-color) 55%, var(--theme-surface-default-color));
    --theme-status-warning-light-color: color-mix(in srgb, var(--theme-status-warning-color) 22%, var(--theme-surface-default-color));
    --theme-status-danger-light-color: color-mix(in srgb, var(--theme-status-danger-color) 38%, var(--theme-surface-default-color));
    --theme-status-success-subtle-color: color-mix(in srgb, var(--theme-status-success-color) 10%, var(--theme-surface-default-color));
    --theme-status-information-subtle-color: color-mix(in srgb, var(--theme-status-information-color) 10%, var(--theme-surface-default-color));
    --theme-status-warning-subtle-color: color-mix(in srgb, var(--theme-status-warning-color) 14%, var(--theme-surface-default-color));
    --theme-status-danger-subtle-color: color-mix(in srgb, var(--theme-status-danger-color) 7%, var(--theme-surface-default-color));
    --theme-status-success-border-color: color-mix(in srgb, var(--theme-status-success-color) 38%, var(--theme-surface-default-color));
    --theme-status-information-border-color: color-mix(in srgb, var(--theme-status-information-color) 38%, var(--theme-surface-default-color));
    --theme-status-warning-border-color: color-mix(in srgb, var(--theme-status-warning-color) 42%, var(--theme-surface-default-color));
    --theme-status-danger-border-color: color-mix(in srgb, var(--theme-status-danger-color) 38%, var(--theme-surface-default-color));
    --theme-overlay-scrim-color: rgb(0 0 0 / 0.4);

    /* Syncfusion Tailwind 3 adapter (34.x public CSS-variable contract) */
    --e-font-name: var(--brand-font-family);
    --color-sf-primary: var(--theme-action-primary-rest-color);
    --color-sf-primary-text-color: var(--theme-text-inverse-color);
    --color-sf-primary-light: var(--theme-action-primary-light-color);
    --color-sf-primary-lighter: var(--theme-action-primary-lighter-color);
    --color-sf-primary-dark: var(--theme-action-primary-hover-color);
    --color-sf-primary-darker: var(--theme-action-primary-pressed-color);
    --color-sf-primary-outline: var(--theme-action-primary-rest-color);
    --color-sf-secondary: var(--theme-surface-default-color);
    --color-sf-secondary-outline: var(--theme-border-default-color);

    /* Tailwind 3 component tokens that do not inherit the common primary ramp. */
    --color-sf-appbar-bg-color-alt1: var(--theme-surface-default-color);
    --color-sf-appbar-color-alt1: var(--theme-text-primary-color);
    --color-sf-appbar-hover-bg-color-alt2: var(--theme-action-primary-light-color);
    --color-sf-rating-selected-hover-color: var(--theme-action-primary-hover-color);
    --color-sf-rating-unrated-hover-color: var(--theme-action-primary-rest-color);
    --color-sf-rating-pressed-color: var(--theme-action-primary-pressed-color);
    --color-sf-chip-primary-bg-color: var(--theme-action-primary-lighter-color);
    --color-sf-chip-primary-bg-color-disabled: var(--theme-action-primary-lighter-color);
    --color-sf-chip-primary-bg-color-hover: var(--theme-action-primary-lighter-color);
    --color-sf-chip-primary-bg-color-pressed: var(--theme-action-primary-light-color);
    --color-sf-chip-primary-border-color: var(--theme-action-primary-light-color);
    --color-sf-chip-primary-border-color-disabled: var(--theme-action-primary-light-color);
    --color-sf-chip-primary-border-color-hover: var(--theme-action-primary-light-color);
    --color-sf-chip-primary-border-color-pressed: var(--theme-action-primary-light-color);
    --color-sf-chip-primary-icon-bg-color-hover: var(--theme-action-primary-light-color);
    --color-sf-chip-primary-icon-bg-color-pressed: var(--theme-action-primary-light-color);
    --color-sf-chip-primary-icon-color: color-mix(in srgb, var(--theme-action-primary-rest-color) 50%, transparent);
    --color-sf-chip-primary-icon-color-hover: var(--theme-action-primary-hover-color);
    --color-sf-chip-primary-icon-color-pressed: var(--theme-action-primary-pressed-color);
    --color-sf-chip-primary-text: var(--theme-action-primary-rest-color);
    --color-sf-chip-primary-text-disabled: var(--theme-text-disabled-color);
    --color-sf-chip-primary-text-hover: var(--theme-action-primary-hover-color);
    --color-sf-chip-primary-text-pressed: var(--theme-action-primary-pressed-color);

    --color-sf-content-bg-color: var(--theme-surface-subtle-color);
    --color-sf-content-bg-color-alt1: var(--theme-surface-default-color);
    --color-sf-content-bg-color-alt2: var(--theme-surface-muted-color);
    --color-sf-content-bg-color-alt3: var(--theme-border-muted-color);
    --color-sf-content-bg-color-alt4: var(--theme-surface-page-color);
    --color-sf-content-bg-color-alt5: var(--theme-border-default-color);
    --color-sf-content-bg-color-hover: var(--theme-surface-hover-color);
    --color-sf-content-bg-color-pressed: var(--theme-surface-pressed-color);
    --color-sf-content-bg-color-focus: var(--theme-surface-hover-color);
    --color-sf-content-bg-color-selected: var(--theme-surface-selected-color);
    --color-sf-content-bg-color-dragged: var(--theme-action-primary-lighter-color);
    --color-sf-content-bg-color-disabled: var(--theme-surface-muted-color);
    --color-sf-flyout-bg-color: var(--theme-surface-default-color);
    --color-sf-flyout-bg-color-hover: var(--theme-surface-hover-color);
    --color-sf-flyout-bg-color-pressed: var(--theme-surface-pressed-color);
    --color-sf-flyout-bg-color-selected: var(--theme-surface-selected-color);
    --color-sf-flyout-bg-color-focus: var(--theme-surface-hover-color);
    --color-sf-flyout-bg-color-disabled: var(--theme-surface-muted-color);
    --color-sf-text-input-bg-color: var(--theme-surface-default-color);
    --color-sf-overlay-bg-color: var(--theme-overlay-scrim-color);
    --color-sf-table-bg-color-hover: var(--theme-surface-hover-color);
    --color-sf-table-bg-color-pressed: var(--theme-surface-pressed-color);
    --color-sf-table-bg-color-selected: var(--theme-action-primary-lighter-color);

    --color-sf-content-text-color: var(--theme-text-primary-color);
    --color-sf-content-text-color-alt1: var(--theme-text-secondary-color);
    --color-sf-content-text-color-alt2: var(--theme-text-muted-color);
    --color-sf-content-text-color-alt3: var(--theme-text-muted-color);
    --color-sf-content-text-color-alt4: var(--theme-text-disabled-color);
    --color-sf-content-text-color-hover: var(--theme-text-primary-color);
    --color-sf-content-text-color-pressed: var(--theme-text-primary-color);
    --color-sf-content-text-color-focus: var(--theme-text-primary-color);
    --color-sf-content-text-color-selected: var(--theme-text-primary-color);
    --color-sf-content-text-color-dragged: var(--theme-text-primary-color);
    --color-sf-content-text-color-disabled: var(--theme-text-disabled-color);
    --color-sf-placeholder-text-color: var(--theme-text-muted-color);
    --color-sf-flyout-text-color: var(--theme-text-primary-color);
    --color-sf-flyout-text-color-hover: var(--theme-text-primary-color);
    --color-sf-flyout-text-color-pressed: var(--theme-text-primary-color);
    --color-sf-flyout-text-color-selected: var(--theme-text-primary-color);
    --color-sf-flyout-text-color-focus: var(--theme-text-primary-color);
    --color-sf-flyout-text-color-disabled: var(--theme-text-disabled-color);
    --color-sf-icon-color: var(--theme-text-secondary-color);
    --color-sf-icon-color-hover: var(--theme-text-primary-color);
    --color-sf-icon-color-pressed: var(--theme-text-primary-color);
    --color-sf-icon-color-disabled: var(--theme-text-disabled-color);
    --color-sf-close-icon-color: var(--theme-text-disabled-color);
    --color-sf-close-icon-color-hover: var(--theme-text-muted-color);
    --color-sf-close-icon-color-pressed: var(--theme-text-muted-color);
    --color-sf-close-icon-color-disabled: var(--theme-border-default-color);

    --color-sf-border-light: var(--theme-border-muted-color);
    --color-sf-border: var(--theme-border-default-color);
    --color-sf-border-dark: var(--theme-border-default-color);
    --color-sf-border-hover: var(--theme-text-secondary-color);
    --color-sf-border-pressed: var(--theme-text-primary-color);
    --color-sf-border-focus: var(--theme-border-default-color);
    --color-sf-border-selected: var(--theme-border-strong-color);
    --color-sf-border-dragged: var(--theme-action-primary-lighter-color);
    --color-sf-border-disabled: var(--theme-border-muted-color);
    --color-sf-border-warning: var(--theme-status-warning-color);
    --color-sf-border-error: var(--theme-status-danger-color);
    --color-sf-border-success: var(--theme-status-success-color);
    --color-sf-tab-border: var(--theme-border-strong-color);
    --color-sf-treeview-item-active-hover-bg: var(--theme-surface-pressed-color);

    --color-sf-primary-bg-color: var(--theme-action-primary-rest-color);
    --color-sf-primary-border-color: var(--theme-action-primary-rest-color);
    --color-sf-primary-text: var(--theme-text-inverse-color);
    --color-sf-primary-bg-color-hover: var(--theme-action-primary-hover-color);
    --color-sf-primary-border-color-hover: var(--theme-action-primary-hover-color);
    --color-sf-primary-text-hover: var(--theme-text-inverse-color);
    --color-sf-primary-bg-color-pressed: var(--theme-action-primary-pressed-color);
    --color-sf-primary-border-color-pressed: var(--theme-action-primary-pressed-color);
    --color-sf-primary-text-pressed: var(--theme-text-inverse-color);
    --color-sf-primary-bg-color-focus: var(--theme-action-primary-hover-color);
    --color-sf-primary-border-color-focus: var(--theme-action-primary-hover-color);
    --color-sf-primary-text-focus: var(--theme-text-inverse-color);
    --color-sf-primary-bg-color-disabled: var(--theme-surface-muted-color);
    --color-sf-primary-border-color-disabled: var(--theme-surface-muted-color);
    --color-sf-primary-text-disabled: var(--theme-text-disabled-color);

    --color-sf-secondary-bg-color: var(--theme-surface-default-color);
    --color-sf-secondary-border-color: var(--theme-border-default-color);
    --color-sf-secondary-text-color: var(--theme-text-primary-color);
    --color-sf-secondary-bg-color-hover: var(--theme-surface-hover-color);
    --color-sf-secondary-border-color-hover: var(--theme-border-default-color);
    --color-sf-secondary-text-color-hover: var(--theme-text-primary-color);
    --color-sf-secondary-bg-color-pressed: var(--theme-surface-pressed-color);
    --color-sf-secondary-border-color-pressed: var(--theme-border-strong-color);
    --color-sf-secondary-text-color-pressed: var(--theme-text-primary-color);
    --color-sf-secondary-bg-color-focus: var(--theme-surface-default-color);
    --color-sf-secondary-border-color-focus: var(--theme-text-primary-color);
    --color-sf-secondary-text-color-focus: var(--theme-text-primary-color);
    --color-sf-secondary-bg-color-disabled: var(--theme-surface-muted-color);
    --color-sf-secondary-border-color-disabled: var(--theme-border-muted-color);
    --color-sf-secondary-text-color-disabled: var(--theme-text-disabled-color);

    --color-sf-success: var(--theme-status-success-color);
    --color-sf-info: var(--theme-status-information-color);
    --color-sf-warning: var(--theme-status-warning-color);
    --color-sf-danger: var(--theme-status-danger-color);
    --color-sf-success-light: var(--theme-status-success-light-color);
    --color-sf-info-light: var(--theme-status-information-light-color);
    --color-sf-warning-light: var(--theme-status-warning-light-color);
    --color-sf-danger-light: var(--theme-status-danger-light-color);
    --color-sf-success-lighter: var(--theme-status-success-subtle-color);
    --color-sf-info-lighter: var(--theme-status-information-subtle-color);
    --color-sf-warning-lighter: var(--theme-status-warning-subtle-color);
    --color-sf-danger-lighter: var(--theme-status-danger-subtle-color);
    --color-sf-success-dark: var(--theme-status-success-pressed-color);
    --color-sf-info-dark: var(--theme-status-information-pressed-color);
    --color-sf-warning-dark: var(--theme-status-warning-pressed-color);
    --color-sf-danger-dark: var(--theme-status-danger-pressed-color);

    --color-sf-success-bg-color: var(--theme-status-success-color);
    --color-sf-success-bg-color-hover: var(--theme-status-success-hover-color);
    --color-sf-success-bg-color-pressed: var(--theme-status-success-pressed-color);
    --color-sf-success-bg-color-focus: var(--theme-status-success-color);
    --color-sf-success-bg-color-disabled: var(--theme-status-success-light-color);
    --color-sf-success-border-color: var(--theme-status-success-color);
    --color-sf-success-border-color-hover: var(--theme-status-success-hover-color);
    --color-sf-success-border-color-pressed: var(--theme-status-success-pressed-color);
    --color-sf-success-border-color-focus: var(--theme-status-success-hover-color);
    --color-sf-success-border-color-disabled: var(--theme-status-success-light-color);
    --color-sf-success-outline: var(--theme-status-success-color);
    --color-sf-success-text: var(--theme-text-inverse-color);
    --color-sf-success-text-hover: var(--theme-text-inverse-color);
    --color-sf-success-text-pressed: var(--theme-text-inverse-color);
    --color-sf-success-text-focus: var(--theme-text-inverse-color);
    --color-sf-success-text-disabled: var(--theme-text-inverse-color);
    --color-sf-info-bg-color: var(--theme-status-information-color);
    --color-sf-info-bg-color-hover: var(--theme-status-information-hover-color);
    --color-sf-info-bg-color-pressed: var(--theme-status-information-pressed-color);
    --color-sf-info-bg-color-focus: var(--theme-status-information-color);
    --color-sf-info-bg-color-disabled: var(--theme-status-information-light-color);
    --color-sf-info-border-color: var(--theme-status-information-color);
    --color-sf-info-border-color-hover: var(--theme-status-information-hover-color);
    --color-sf-info-border-color-pressed: var(--theme-status-information-pressed-color);
    --color-sf-info-border-color-focus: var(--theme-status-information-hover-color);
    --color-sf-info-border-color-disabled: var(--theme-status-information-light-color);
    --color-sf-info-outline: var(--theme-status-information-color);
    --color-sf-info-text: var(--theme-text-inverse-color);
    --color-sf-info-text-hover: var(--theme-text-inverse-color);
    --color-sf-info-text-pressed: var(--theme-text-inverse-color);
    --color-sf-info-text-focus: var(--theme-text-inverse-color);
    --color-sf-info-text-disabled: var(--theme-text-inverse-color);
    --color-sf-warning-bg-color: var(--theme-status-warning-color);
    --color-sf-warning-bg-color-hover: var(--theme-status-warning-hover-color);
    --color-sf-warning-bg-color-pressed: var(--theme-status-warning-pressed-color);
    --color-sf-warning-bg-color-focus: var(--theme-status-warning-color);
    --color-sf-warning-bg-color-disabled: var(--theme-status-warning-light-color);
    --color-sf-warning-border-color: var(--theme-status-warning-color);
    --color-sf-warning-border-color-hover: var(--theme-status-warning-hover-color);
    --color-sf-warning-border-color-pressed: var(--theme-status-warning-pressed-color);
    --color-sf-warning-border-color-focus: var(--theme-status-warning-hover-color);
    --color-sf-warning-border-color-disabled: var(--theme-status-warning-light-color);
    --color-sf-warning-outline: var(--theme-status-warning-color);
    --color-sf-warning-text: var(--theme-text-primary-color);
    --color-sf-warning-text-hover: var(--theme-text-primary-color);
    --color-sf-warning-text-pressed: var(--theme-text-primary-color);
    --color-sf-warning-text-focus: var(--theme-text-primary-color);
    --color-sf-warning-text-disabled: var(--theme-text-primary-color);
    --color-sf-danger-bg-color: var(--theme-status-danger-color);
    --color-sf-danger-bg-color-hover: var(--theme-status-danger-hover-color);
    --color-sf-danger-bg-color-pressed: var(--theme-status-danger-pressed-color);
    --color-sf-danger-bg-color-focus: var(--theme-status-danger-color);
    --color-sf-danger-bg-color-disabled: var(--theme-status-danger-light-color);
    --color-sf-danger-border-color: var(--theme-status-danger-color);
    --color-sf-danger-border-color-hover: var(--theme-status-danger-hover-color);
    --color-sf-danger-border-color-pressed: var(--theme-status-danger-pressed-color);
    --color-sf-danger-border-color-focus: var(--theme-status-danger-hover-color);
    --color-sf-danger-border-color-disabled: var(--theme-status-danger-light-color);
    --color-sf-danger-outline: var(--theme-status-danger-color);
    --color-sf-danger-text: var(--theme-text-inverse-color);
    --color-sf-danger-text-hover: var(--theme-text-inverse-color);
    --color-sf-danger-text-pressed: var(--theme-text-inverse-color);
    --color-sf-danger-text-focus: var(--theme-text-inverse-color);
    --color-sf-danger-text-disabled: var(--theme-text-inverse-color);

    --color-sf-msg-success-bg-color: var(--theme-status-success-subtle-color);
    --color-sf-msg-success-border-color: var(--theme-status-success-border-color);
    --color-sf-msg-success-color-alt1: var(--theme-status-success-color);
    --color-sf-msg-success-bg-color-alt2: var(--theme-status-success-color);
    --color-sf-msg-success-icon-color: var(--theme-status-success-color);
    --color-sf-msg-info-bg-color: var(--theme-status-information-subtle-color);
    --color-sf-msg-info-border-color: var(--theme-status-information-border-color);
    --color-sf-msg-info-color-alt1: var(--theme-status-information-color);
    --color-sf-msg-info-bg-color-alt2: var(--theme-status-information-color);
    --color-sf-msg-info-icon-color: var(--theme-status-information-color);
    --color-sf-msg-warning-bg-color: var(--theme-status-warning-subtle-color);
    --color-sf-msg-warning-border-color: var(--theme-status-warning-border-color);
    --color-sf-msg-warning-color-alt1: var(--theme-status-warning-pressed-color);
    --color-sf-msg-warning-bg-color-alt2: var(--theme-status-warning-color);
    --color-sf-msg-warning-icon-color: var(--theme-status-warning-pressed-color);
    --color-sf-msg-danger-bg-color: var(--theme-status-danger-subtle-color);
    --color-sf-msg-danger-border-color: var(--theme-status-danger-border-color);
    --color-sf-msg-danger-color-alt1: var(--theme-status-danger-color);
    --color-sf-msg-danger-bg-color-alt2: var(--theme-status-danger-color);
    --color-sf-msg-danger-icon-color: var(--theme-status-danger-color);

    /* Compatibility aliases for existing CSS and chart JavaScript */
    --cogo-brand-green-color: var(--legacy-cogo-green-color);
    --cogo-brand-teal-color: var(--legacy-cogo-teal-color);
    --cogo-brand-lightblue-color: var(--legacy-cogo-light-blue-color);
    --cogo-main-red-color: var(--theme-status-danger-color);
    --cogo-main-lightred-color: #ff4d4d;
    --cogo-main-black-color: var(--theme-text-primary-color);
    --cogo-main-lightgrey-color: var(--theme-text-muted-color);
    --cogo-main-darkgrey-color: var(--theme-text-secondary-color);
    --cogo-main-yellow-color: var(--theme-status-warning-color);
    /* Preserve legacy card surfaces until each page opts into the new canvas. */
    --cogo-main-offwhite-color: #f7f7f7;
    --cogo-error-red-color: var(--theme-status-danger-color);
    --cogo-disabled-bg-color: var(--theme-surface-muted-color);
    --cogo-disabled-fg-color: var(--theme-text-disabled-color);
    --cogo-disabled-hover-bg-color: var(--theme-text-disabled-color);
    --cogo-disabled-opacity: 0.6;
    --cogo-asset-state-inoperation-bg: #d9f3ec;
    --cogo-asset-state-inoperation-border: #7fd4bf;
    --cogo-asset-state-inoperation-fg: #0a6f57;
    --cogo-asset-state-spare-bg: #d8e9f7;
    --cogo-asset-state-spare-border: #8cbde6;
    --cogo-asset-state-spare-fg: #175886;
    --cogo-asset-state-underrepair-bg: #fff1cc;
    --cogo-asset-state-underrepair-border: #f0c36a;
    --cogo-asset-state-underrepair-fg: #7a4f00;
    --cogo-asset-state-decommissioned-bg: #f1efed;
    --cogo-asset-state-decommissioned-border: #ddd8d3;
    --cogo-asset-state-decommissioned-fg: #8a827a;
    --cogo-asset-state-default-bg: #f3f2f1;
    --cogo-asset-state-default-border: #d2d0ce;
    --cogo-asset-state-default-fg: #323130;

    /* Severity scale. Deliberately not aliased onto --theme-status-*: the
       product meaning differs (severity "information" reads as caution, the
       status ramp's information is informational blue). */
    --theme-severity-normal-color: var(--legacy-cogo-green-color);
    --theme-severity-normal-bg: #ecfdf8;
    --theme-severity-normal-border: color-mix(in srgb, var(--legacy-cogo-green-color) 24%, transparent);
    --theme-severity-normal-fg: #008066;
    --theme-severity-information-color: #f59f00;
    --theme-severity-information-bg: #fff8e6;
    --theme-severity-information-border: color-mix(in srgb, var(--theme-severity-information-color) 24%, transparent);
    --theme-severity-information-fg: #9a6200;
    --theme-severity-important-color: var(--theme-status-danger-color);
    --theme-severity-important-bg: #fff5f5;
    --theme-severity-important-border: color-mix(in srgb, var(--theme-status-danger-color) 20%, transparent);
    --theme-severity-important-fg: var(--theme-status-danger-color);
    --theme-severity-critical-color: #7a1630;
    --theme-severity-critical-bg: #f6d9de;
    --theme-severity-critical-border: color-mix(in srgb, var(--theme-severity-critical-color) 28%, transparent);
    --theme-severity-critical-fg: var(--theme-severity-critical-color);
    --theme-severity-unknown-color: var(--theme-text-disabled-color);
    --theme-severity-unknown-bg: #f2f3f3;
    --theme-severity-unknown-border: color-mix(in srgb, var(--theme-text-disabled-color) 28%, transparent);
    --theme-severity-unknown-fg: var(--theme-text-muted-color);

    /* Fluent can write this token inline at runtime. Keep !important here and on
       provider scopes below so Inter remains authoritative during the migration. */
    --body-font: var(--brand-font-family) !important;

    /* Chart tokens */
    --theme-accent-text-color: var(--theme-action-primary-rest-color);
    --theme-chart-risk-score-band-high-color: color-mix(in srgb, var(--theme-status-warning-color) 14%, transparent);
    --theme-chart-risk-score-band-low-color: color-mix(in srgb, var(--theme-action-primary-rest-color) 10%, transparent);
    --theme-chart-risk-score-band-moderate-color: color-mix(in srgb, var(--legacy-cogo-teal-color) 12%, transparent);
    --theme-chart-risk-score-band-critical-color: color-mix(in srgb, var(--theme-status-danger-color) 10%, transparent);
    --theme-chart-risk-score-band-label-color: var(--theme-text-muted-color);
    --theme-chart-risk-score-line-color: var(--theme-action-primary-rest-color);
    --theme-chart-risk-score-story-marker-color: color-mix(in srgb, var(--theme-text-muted-color) 55%, transparent);
}

/* Reassert the application defaults after the Bootstrap and Fluent reboots. */
html,
body {
    font-family: var(--brand-font-family);
    color: var(--theme-text-primary-color);
    background-color: var(--theme-surface-default-color);
}

/* Fluent derives a brighter accessible ramp from CustomColor at runtime. Pin the
   interactive tokens to the exact Figma palette while retaining the generated
   ramp for Fluent recipes that do not have a semantic application mapping. */
:root,
body,
fluent-design-system-provider {
    --body-font: var(--brand-font-family) !important;
    --accent-fill-rest: var(--theme-action-primary-rest-color) !important;
    --accent-fill-hover: var(--theme-action-primary-hover-color) !important;
    --accent-fill-active: var(--theme-action-primary-pressed-color) !important;
    --accent-fill-focus: var(--theme-action-primary-rest-color) !important;
    --foreground-on-accent-rest: var(--theme-text-inverse-color) !important;
    --foreground-on-accent-hover: var(--theme-text-inverse-color) !important;
    --foreground-on-accent-active: var(--theme-text-inverse-color) !important;
    --foreground-on-accent-focus: var(--theme-text-inverse-color) !important;
}

/*
 * Syncfusion 34.2.4 vendor exceptions. These declarations are literal or use
 * invalid alpha composition, although Tailwind 3 defines its variables as full
 * CSS colors. Keep exceptions here and reassess them when upgrading the theme.
 */
.e-btn.e-outline.e-primary,
.e-css.e-btn.e-outline.e-primary {
    --theme-syncfusion-outline-color: var(--theme-action-primary-rest-color);
}

.e-btn.e-outline.e-success,
.e-css.e-btn.e-outline.e-success {
    --theme-syncfusion-outline-color: var(--theme-status-success-color);
}

.e-btn.e-outline.e-info,
.e-css.e-btn.e-outline.e-info {
    --theme-syncfusion-outline-color: var(--theme-status-information-color);
}

.e-btn.e-outline.e-warning,
.e-css.e-btn.e-outline.e-warning {
    --theme-syncfusion-outline-color: var(--theme-status-warning-color);
}

.e-btn.e-outline.e-danger,
.e-css.e-btn.e-outline.e-danger {
    --theme-syncfusion-outline-color: var(--theme-status-danger-color);
}

.e-btn.e-outline:is(.e-primary, .e-success, .e-info, .e-warning, .e-danger):is(:disabled, .e-disabled),
.e-css.e-btn.e-outline:is(.e-primary, .e-success, .e-info, .e-warning, .e-danger):is(:disabled, .e-disabled) {
    border-color: color-mix(in srgb, var(--theme-syncfusion-outline-color) 65%, transparent);
    color: color-mix(in srgb, var(--theme-syncfusion-outline-color) 65%, transparent);
}

.e-progress-btn {
    --theme-syncfusion-spinner-track-color: var(--theme-border-default-color);
}

.e-progress-btn.e-primary {
    --theme-syncfusion-spinner-track-color: var(--theme-action-primary-hover-color);
}

.e-progress-btn.e-success {
    --theme-syncfusion-spinner-track-color: var(--theme-status-success-hover-color);
}

.e-progress-btn.e-info {
    --theme-syncfusion-spinner-track-color: var(--theme-status-information-hover-color);
}

.e-progress-btn.e-warning {
    --theme-syncfusion-spinner-track-color: color-mix(in srgb, var(--theme-text-primary-color) 35%, transparent);
}

.e-progress-btn.e-danger {
    --theme-syncfusion-spinner-track-color: var(--theme-status-danger-hover-color);
}

.e-progress-btn.e-primary:is(.e-outline, .e-flat) {
    --theme-syncfusion-spinner-track-color: var(--theme-action-primary-light-color);
}

.e-progress-btn.e-success:is(.e-outline, .e-flat) {
    --theme-syncfusion-spinner-track-color: var(--theme-status-success-subtle-color);
}

.e-progress-btn.e-info:is(.e-outline, .e-flat) {
    --theme-syncfusion-spinner-track-color: var(--theme-status-information-subtle-color);
}

.e-progress-btn.e-warning:is(.e-outline, .e-flat) {
    --theme-syncfusion-spinner-track-color: var(--theme-text-primary-color);
}

.e-progress-btn.e-danger:is(.e-outline, .e-flat) {
    --theme-syncfusion-spinner-track-color: var(--theme-status-danger-subtle-color);
}

.e-progress-btn .e-spinner-pane .e-spinner-inner .e-spin-tailwind3 .e-path-circle {
    stroke: var(--theme-syncfusion-spinner-track-color) !important;
}

.e-richtexteditor ::selection {
    color: var(--theme-text-inverse-color);
    background: var(--theme-action-primary-rest-color);
}