/*
 * Origin semantic colour theme
 *
 * Load order:
 *   1. Radzen theme CSS
 *   2. app.css
 *   3. origin-layout.css
 *   4. origin-motion.css
 *   5. origin-semantic-theme.css
 *   6. origin-effects.css
 *   7. origin-typography.css
 *
 * Dark is the default. Set data-theme="light" on html or an application shell
 * to activate the light semantic mappings.
 *
 * Token source: Origin Foundations Figma file, reconciled 17 September 2026.
 */

/* ========================================================================== */
/* Primitive colour tokens                                                    */
/* ========================================================================== */

:root {
    /* Brand */
    --teal-100: #E6FDF7;
    --teal-200: #CDFCEF;
    --teal-300: #B3FAE7;
    --teal-400: #9AF9DF;
    --teal-500: #81F7D7;
    --teal-600: #6ECDB7;
    --teal-700: #6AA59D;
    --teal-800: #5C7B7F;
    --teal-900: #44515D;

    /* Light neutral — named Squid Ink in Figma */
    --squid-ink-100: #FFFFFF;
    --squid-ink-200: #F3F3F4;
    --squid-ink-300: #ECEDEF;
    --squid-ink-400: #E6E7E9;
    --squid-ink-500: #E0E1E4;
    --squid-ink-600: #D3D4D8;
    --squid-ink-700: #A7A8B0;
    --squid-ink-800: #7A7D89;
    --squid-ink-900: #4E5161;
    --squid-ink-1000: #22263A;

    /* Dark neutral — named Squid Ink 2 in Figma */
    --squid-ink-2-50: #E9E9EB;
    --squid-ink-2-100: #D3D4D8;
    --squid-ink-2-150: #BDBEC4;
    --squid-ink-2-200: #A7A8B0;
    --squid-ink-2-250: #91939D;
    --squid-ink-2-300: #7A7D89;
    --squid-ink-2-350: #646775;
    --squid-ink-2-400: #4E5161;
    --squid-ink-2-450: #383C4E;
    --squid-ink-2-500: #22263A;
    --squid-ink-2-550: #1F2234;
    --squid-ink-2-600: #1B1E2E;
    --squid-ink-2-650: #181B29;
    --squid-ink-2-700: #141723;
    --squid-ink-2-750: #11131D;
    --squid-ink-2-800: #0E0F17;
    --squid-ink-2-850: #0B0C12;
    --squid-ink-2-900: #07080C;

    /* Neutral gray */
    --neutral-gray-0: #FFFFFF;
    --neutral-gray-25: #FAFAFA;
    --neutral-gray-50: #F3F3F4;
    --neutral-gray-75: #EDEDEE;
    --neutral-gray-100: #E7E7E8;
    --neutral-gray-150: #DBDBDD;
    --neutral-gray-200: #CECFD2;
    --neutral-gray-250: #C2C3C7;
    --neutral-gray-300: #B6B7BB;
    --neutral-gray-350: #AAABB0;
    --neutral-gray-400: #9E9FA5;
    --neutral-gray-450: #92939A;
    --neutral-gray-500: #85878E;
    --neutral-gray-550: #797C83;
    --neutral-gray-600: #6D7077;
    --neutral-gray-650: #61646C;
    --neutral-gray-700: #555861;
    --neutral-gray-750: #494C56;
    --neutral-gray-800: #3D404A;
    --neutral-gray-850: #31343F;
    --neutral-gray-900: #242834;
    --neutral-gray-950: #181C29;
    --neutral-gray-1000: #0C101D;

    /* White scale */
    --white-500: #FFFFFF;
    --white-600: #D5D5D5;
    --white-700: #AAAAAA;
    --white-800: #808080;
    --white-900: #555555;
    --white-950: #2B2B2B;
    --white-1000: #000000;

    /* Mid blue */
    --mid-blue-100: #ECF2FA;
    --mid-blue-200: #D9E4F6;
    --mid-blue-300: #C5D7F1;
    --mid-blue-400: #B2C9ED;
    --mid-blue-500: #9FBCE8;
    --mid-blue-600: #869EC5;
    --mid-blue-700: #6D80A2;
    --mid-blue-800: #54627F;
    --mid-blue-900: #3B445C;

    /* Soft pine */
    --soft-pine-100: #E1F1E9;
    --soft-pine-200: #C3E2D3;
    --soft-pine-300: #A6D4BC;
    --soft-pine-400: #88C5A6;
    --soft-pine-500: #6AB790;
    --soft-pine-600: #5C9A7F;
    --soft-pine-700: #4D7D6D;
    --soft-pine-800: #3F605C;
    --soft-pine-900: #30434A;

    /* Lilac */
    --lilac-100: #F4EFF9;
    --lilac-200: #E8DFF3;
    --lilac-300: #DDD0EE;
    --lilac-400: #D1C0E8;
    --lilac-500: #C6B0E2;
    --lilac-600: #A594C0;
    --lilac-700: #84799E;
    --lilac-800: #645D7D;
    --lilac-900: #43425B;

    /* Hot yellow */
    --hot-yellow-100: #FBF3E7;
    --hot-yellow-200: #F7E7CF;
    --hot-yellow-300: #F2DBB6;
    --hot-yellow-400: #EECF9E;
    --hot-yellow-500: #EAC386;
    --hot-yellow-600: #C2A477;
    --hot-yellow-700: #9A8467;
    --hot-yellow-800: #726558;
    --hot-yellow-900: #4A4548;

    /* Coral */
    --coral-100: #FEE1E1;
    --coral-200: #FDC4C4;
    --coral-300: #FBA6A6;
    --coral-400: #FA8989;
    --coral-500: #F96B6B;
    --coral-600: #CE5D61;
    --coral-700: #A34F57;
    --coral-800: #78424D;
    --coral-900: #4D3443;

    /* Lime green */
    --lime-green-100: #EEF4E5;
    --lime-green-200: #DDE8CA;
    --lime-green-300: #CBDDB0;
    --lime-green-400: #BAD195;
    --lime-green-500: #A9C67B;
    --lime-green-600: #8EA66E;
    --lime-green-700: #738661;
    --lime-green-800: #586653;
    --lime-green-900: #3D4646;

    /* Lush pink */
    --lush-pink-100: #FFF4FB;
    --lush-pink-200: #FFD2EE;
    --lush-pink-300: #FFBCE5;
    --lush-pink-400: #FFA5DD;
    --lush-pink-500: #FF8FD4;
    --lush-pink-600: #D37AB5;
    --lush-pink-700: #A76596;
    --lush-pink-800: #7A5077;
    --lush-pink-900: #4E3B58;

    /* Orange */
    --orange-100: #FFF1DB;
    --orange-200: #FEE4B7;
    --orange-300: #FED694;
    --orange-400: #FDC970;
    --orange-500: #FDBB4C;
    --orange-600: #D19D48;
    --orange-700: #A57F44;
    --orange-800: #7A6241;
    --orange-900: #4E443D;

    /* Acid green */
    --acid-green-100: #F4FCE9;
    --acid-green-200: #E9F9D3;
    --acid-green-300: #DDF5BC;
    --acid-green-400: #D2F2A6;
    --acid-green-500: #C7EF90;
    --acid-green-600: #9FBF73;
    --acid-green-700: #778F56;
    --acid-green-800: #50603A;
    --acid-green-900: #28301D;

    /* Status: success */
    --status-success-100: #EBFFED;
    --status-success-200: #D8FFDC;
    --status-success-300: #C3FFCA;
    --status-success-400: #A5FFB2;
    --status-success-500: #7DFF95;
    --status-success-600: #68D180;
    --status-success-700: #51A069;
    --status-success-800: #3A6F52;
    --status-success-900: #254F35;

    /* Status: warning */
    --status-warning-100: #FFF8EB;
    --status-warning-200: #FFEED8;
    --status-warning-300: #FFE1C3;
    --status-warning-400: #FFCDA5;
    --status-warning-500: #FFBC5E;
    --status-warning-600: #D19A4F;
    --status-warning-700: #A07640;
    --status-warning-800: #6F5231;
    --status-warning-900: #423424;

    /* Status: danger */
    --status-danger-100: #FFEFEF;
    --status-danger-200: #FFDDDD;
    --status-danger-300: #FFC4C4;
    --status-danger-400: #FFA0A0;
    --status-danger-500: #FF8080;
    --status-danger-600: #D16C70;
    --status-danger-700: #A05962;
    --status-danger-800: #6F3F4B;
    --status-danger-900: #4E3747;

    /* Status: info */
    --status-info-100: #EBF8FF;
    --status-info-200: #D8F0FF;
    --status-info-300: #C3E8FF;
    --status-info-400: #A5DCFF;
    --status-info-500: #87D1FF;
    --status-info-600: #68ADD5;
    --status-info-700: #5184A8;
    --status-info-800: #3A5C7B;
    --status-info-900: #253D55;

}

/* ========================================================================== */
/* Semantic colour tokens — light                                             */
/* ========================================================================== */

    :root[data-theme="light"],
    [data-theme="light"] {
        color-scheme: light;

        /* Base surfaces */
        --surface-base-page: var(--neutral-gray-0);
        --surface-base-card-background: var(--neutral-gray-25);
        --surface-base-card-background-alt: var(--neutral-gray-50);
        --surface-base-card-background-nested: var(--neutral-gray-25);
        --surface-base-overlay-background: var(--neutral-gray-0);
        --surface-base-backdrop: rgba(0, 0, 0, 0.48);
        --surface-base-image-background: var(--white-500);
        --surface-base-image-background-colour: rgba(129, 247, 215, 0.25);
        --surface-base-assistant-cuido: var(--soft-pine-100);

        /* Field and table surfaces */
        --surface-field-default: var(--neutral-gray-25);
        --surface-field-error: var(--status-danger-100);
        --surface-field-table-header-background: rgb(129 247 215 / 12%);
        --surface-field-table-field-background: var(--neutral-gray-25);
        --surface-field-table-field-background-alt: var(--neutral-gray-50);

        /* Action surfaces */
        --surface-interaction-action-primary: var(--teal-500);
        --surface-interaction-action-hover-primary: var(--teal-600);
        --surface-interaction-action-pressed: var(--teal-700);
        --surface-interaction-action-secondary: var(--mid-blue-500);
        --surface-interaction-action-hover-secondary: var(--mid-blue-600);
        --surface-interaction-action-pressed-secondary: var(--mid-blue-700);
        --surface-interaction-action-tertiary: var(--squid-ink-2-600);
        --surface-interaction-action-hover-tertiary: var(--squid-ink-2-700);
        --surface-interaction-action-pressed-tertiary: var(--squid-ink-2-800);
        --surface-interaction-action-outline: rgba(129, 247, 215, 0);
        --surface-interaction-action-hover-outline: rgba(129, 247, 215, 0.14);
        --surface-interaction-action-pressed-outline: rgba(129, 247, 215, 0.22);
        --surface-interaction-action-destructive: var(--status-danger-700);
        --surface-interaction-action-hover-destructive: var(--status-danger-800);
        --surface-interaction-action-pressed-destructive: var(--status-danger-900);
        --surface-interaction-disabled: var(--neutral-gray-75);

        /* Text */
        --text-primary: var(--squid-ink-1000);
        --text-secondary: var(--neutral-gray-800);
        --text-tertiary: var(--neutral-gray-700);
        --text-disabled: var(--neutral-gray-600);
        --text-on-brand: var(--neutral-gray-1000);
        --text-on-brand-inverse: var(--squid-ink-2-500);
        --text-error: var(--status-danger-800);
        --text-link-default: var(--mid-blue-800);
        --text-link-hover: var(--mid-blue-900);
        --text-action-primary: var(--neutral-gray-1000);
        --text-action-on-action: var(--neutral-gray-1000);
        --text-action-secondary: var(--squid-ink-2-500);
        --text-action-tertiary: var(--neutral-gray-100);
        --text-action-outline: var(--squid-ink-2-500);
        --text-action-destructive: var(--status-danger-800);
        --text-action-on-destructive: var(--white-500);

        /* Icons */
        --icon-default-primary: var(--text-primary);
        --icon-supporting-secondary: #6D7077;
        --icon-disabled: var(--neutral-gray-600);
        --icon-neutral: var(--text-on-brand);
        --icon-brand: var(--squid-ink-2-500);
        --icon-brand-inverse: var(--teal-500);
        --icon-error: var(--status-danger-800);
        --icon-interactive-action: var(--neutral-gray-1000);
        --icon-interactive-action-hover: var(--neutral-gray-1000);
        --icon-interactive-on-action: var(--neutral-gray-1000);
        --icon-interactive-action-secondary: var(--neutral-gray-1000);
        --icon-interactive-action-tertiary: var(--neutral-gray-100);
        --icon-interactive-action-outline: var(--squid-ink-2-500);
        --icon-interactive-destructive: var(--status-danger-800);
        --icon-interactive-on-destructive: var(--white-500);

        /* Borders */
        --border-subtle: var(--squid-ink-600);
        --border-default: var(--squid-ink-500);
        --border-strong: var(--squid-ink-800);
        --border-interactive: var(--neutral-gray-900);
        --border-focus: var(--teal-800);
        --border-disabled: var(--neutral-gray-300);
        --border-error: var(--status-danger-600);
        --border-divider-subtle: var(--neutral-gray-300);
        --border-divider-default: var(--neutral-gray-400);
        --border-divider-strong: var(--neutral-gray-500);
        --border-interaction-action-secondary: var(--mid-blue-800);
        --border-interaction-action-outline: var(--squid-ink-2-500);
        --border-interaction-destructive: var(--status-danger-700);
        --border-navigation-selected: var(--teal-500);

        /* Feedback */
        --feedback-error-surface: var(--status-danger-100);
        --feedback-error-text: var(--status-danger-800);
        --feedback-error-icon: var(--status-danger-800);
        --feedback-error-border: var(--status-danger-600);
        --feedback-warning-surface: var(--status-warning-100);
        --feedback-warning-text: var(--status-warning-800);
        --feedback-warning-icon: var(--status-warning-800);
        --feedback-warning-border: var(--status-warning-600);
        --feedback-success-surface: var(--status-success-100);
        --feedback-success-text: var(--status-success-800);
        --feedback-success-icon: var(--status-success-800);
        --feedback-success-border: var(--status-success-600);
        --feedback-info-surface: var(--status-info-100);
        --feedback-info-text: var(--status-info-800);
        --feedback-info-icon: var(--status-info-800);
        --feedback-info-border: var(--status-info-600);
        --feedback-neutral-surface: var(--neutral-gray-75);
        --feedback-neutral-text: var(--neutral-gray-800);
        --feedback-neutral-icon: var(--neutral-gray-800);
        --feedback-neutral-border: var(--neutral-gray-400);

        /* Indicators */
        --indicator-critical: var(--status-danger-800);
        --indicator-warning: var(--status-warning-800);
        --indicator-healthy: var(--status-success-800);
        --indicator-info: var(--status-info-800);
        --indicator-neutral: var(--squid-ink-800);

        /* Badge indicators */
        --surface-indicator-badge-brand: var(--squid-ink-2-600);
        --surface-indicator-badge-brand-hover: var(--squid-ink-2-700);
        --text-on-indicator-badge-brand: var(--teal-500);
        --surface-indicator-badge-neutral: var(--squid-ink-900);
        --surface-indicator-badge-neutral-hover: var(--squid-ink-1000);
        --text-on-indicator-badge-neutral: var(--white-500);

        /* Charts */
        --chart-series-1: var(--mid-blue-500);
        --chart-series-2: var(--soft-pine-500);
        --chart-series-3: var(--lilac-500);
        --chart-series-4: var(--hot-yellow-500);
        --chart-series-5: var(--coral-500);
        --chart-series-6: var(--lime-green-500);
        --chart-series-7: var(--lush-pink-500);
        --chart-series-8: var(--orange-500);
    }

/* ========================================================================== */
/* Semantic colour tokens — dark                                              */
/* ========================================================================== */

html:root:not([data-theme="light"]),
[data-theme="dark"] {
    color-scheme: dark;

    /* Base surfaces */
    --surface-base-page: var(--squid-ink-2-600);
    --surface-base-card-background: var(--squid-ink-2-650);
    --surface-base-card-background-alt: var(--squid-ink-2-700);
    --surface-base-card-background-nested: var(--squid-ink-2-650);
    --surface-base-overlay-background: var(--squid-ink-2-550);
    --surface-base-backdrop: rgba(0, 0, 0, 0.64);
    --surface-base-image-background: var(--white-500);
    --surface-base-image-background-colour: rgba(129, 247, 215, 0.15);
    --surface-base-assistant-cuido: var(--soft-pine-900);

    /* Field and table surfaces */
    --surface-field-default: var(--squid-ink-2-750);
    --surface-field-error: var(--status-danger-900);
    --surface-field-table-header-background: rgb(129 247 215 / 12%);
    --surface-field-table-field-background: var(--squid-ink-2-700);
    --surface-field-table-field-background-alt: var(--squid-ink-2-750);

    /* Action surfaces */
    --surface-interaction-action-primary: var(--teal-500);
    --surface-interaction-action-hover-primary: var(--teal-400);
    --surface-interaction-action-pressed: var(--teal-600);
    --surface-interaction-action-secondary: var(--squid-ink-500);
    --surface-interaction-action-hover-secondary: var(--squid-ink-400);
    --surface-interaction-action-pressed-secondary: var(--squid-ink-600);
    --surface-interaction-action-tertiary: var(--squid-ink-2-500);
    --surface-interaction-action-hover-tertiary: var(--squid-ink-2-400);
    --surface-interaction-action-pressed-tertiary: var(--squid-ink-2-600);
    --surface-interaction-action-outline: rgba(129, 247, 215, 0);
    --surface-interaction-action-hover-outline: rgba(129, 247, 215, 0.14);
    --surface-interaction-action-pressed-outline: rgba(129, 247, 215, 0.22);
    --surface-interaction-action-destructive: var(--status-danger-600);
    --surface-interaction-action-hover-destructive: var(--status-danger-500);
    --surface-interaction-action-pressed-destructive: var(--status-danger-400);
    --surface-interaction-disabled: var(--squid-ink-2-600);

    /* Text */
    --text-primary: var(--neutral-gray-100);
    --text-secondary: var(--neutral-gray-300);
    --text-tertiary: var(--neutral-gray-400);
    --text-disabled: var(--neutral-gray-500);
    --text-on-brand: var(--neutral-gray-1000);
    --text-on-brand-inverse: var(--teal-500);
    --text-error: var(--status-danger-500);
    --text-link-default: var(--mid-blue-500);
    --text-link-hover: var(--mid-blue-300);
    --text-action-primary: var(--neutral-gray-1000);
    --text-action-on-action: var(--neutral-gray-1000);
    --text-action-secondary: var(--squid-ink-2-500);
    --text-action-tertiary: var(--neutral-gray-100);
    --text-action-outline: var(--teal-500);
    --text-action-destructive: var(--status-danger-500);
    --text-action-on-destructive: var(--neutral-gray-1000);

    /* Icons */
    --icon-default-primary: var(--text-primary);
    --icon-supporting-secondary: #CECFD2;
    --icon-disabled: var(--neutral-gray-500);
    --icon-neutral: var(--text-on-brand);
    --icon-brand: var(--teal-500);
    --icon-brand-inverse: var(--squid-ink-2-500);
    --icon-error: var(--status-danger-500);
    --icon-interactive-action: var(--neutral-gray-1000);
    --icon-interactive-action-hover: var(--neutral-gray-1000);
    --icon-interactive-on-action: var(--neutral-gray-1000);
    --icon-interactive-action-secondary: var(--squid-ink-2-500);
    --icon-interactive-action-tertiary: var(--neutral-gray-100);
    --icon-interactive-action-outline: var(--teal-500);
    --icon-interactive-destructive: var(--status-danger-500);
    --icon-interactive-on-destructive: var(--neutral-gray-1000);

    /* Borders */
    --border-subtle: var(--squid-ink-900);
    --border-default: var(--neutral-gray-700);
    --border-strong: var(--neutral-gray-600);
    --border-interactive: var(--teal-500);
    --border-focus: var(--teal-500);
    --border-disabled: var(--neutral-gray-800);
    --border-error: var(--status-danger-500);
    --border-divider-subtle: var(--neutral-gray-800);
    --border-divider-default: var(--neutral-gray-700);
    --border-divider-strong: var(--neutral-gray-600);
    --border-interaction-action-secondary: var(--squid-ink-700);
    --border-interaction-action-outline: var(--teal-500);
    --border-interaction-destructive: var(--status-danger-500);
    --border-navigation-selected: var(--teal-500);

    /* Feedback */
    --feedback-error-surface: var(--status-danger-900);
    --feedback-error-text: var(--status-danger-500);
    --feedback-error-icon: var(--status-danger-500);
    --feedback-error-border: var(--status-danger-700);
    --feedback-warning-surface: var(--status-warning-900);
    --feedback-warning-text: var(--status-warning-500);
    --feedback-warning-icon: var(--status-warning-500);
    --feedback-warning-border: var(--status-warning-700);
    --feedback-success-surface: var(--status-success-900);
    --feedback-success-text: var(--status-success-500);
    --feedback-success-icon: var(--status-success-500);
    --feedback-success-border: var(--status-success-700);
    --feedback-info-surface: var(--status-info-900);
    --feedback-info-text: var(--status-info-500);
    --feedback-info-icon: var(--status-info-500);
    --feedback-info-border: var(--status-info-700);
    --feedback-neutral-surface: var(--squid-ink-2-700);
    --feedback-neutral-text: var(--neutral-gray-300);
    --feedback-neutral-icon: var(--neutral-gray-300);
    --feedback-neutral-border: var(--neutral-gray-700);

    /* Indicators */
    --indicator-critical: var(--status-danger-400);
    --indicator-warning: var(--status-warning-500);
    --indicator-healthy: var(--status-success-600);
    --indicator-info: var(--status-info-500);
    --indicator-neutral: var(--squid-ink-700);

    /* Badge indicators */
    --surface-indicator-badge-brand: var(--teal-500);
    --surface-indicator-badge-brand-hover: var(--teal-400);
    --text-on-indicator-badge-brand: var(--neutral-gray-1000);
    --surface-indicator-badge-neutral: var(--squid-ink-700);
    --surface-indicator-badge-neutral-hover: var(--squid-ink-600);
    --text-on-indicator-badge-neutral: var(--squid-ink-2-500);

    /* Charts */
    --chart-series-1: var(--mid-blue-500);
    --chart-series-2: var(--soft-pine-500);
    --chart-series-3: var(--lilac-500);
    --chart-series-4: var(--hot-yellow-500);
    --chart-series-5: var(--coral-500);
    --chart-series-6: var(--lime-green-500);
    --chart-series-7: var(--lush-pink-500);
    --chart-series-8: var(--orange-500);
}

/* ========================================================================== */
/* Existing Origin compatibility aliases                                      */
/* Remove these after app.css has been migrated to semantic tokens.           */
/* ========================================================================== */

html:root,
[data-theme] {
    --origin-background: var(--surface-base-page);
    --origin-card-background-alt: var(--surface-base-card-background-alt);
    --origin-overlay-background: var(--surface-base-overlay-background);
    --origin-border: var(--border-default);
    --origin-brand: var(--surface-interaction-action-primary);
    --origin-primary: var(--surface-interaction-action-primary);
    --origin-primary-hover: var(--surface-interaction-action-hover-primary);
    --origin-on-primary: var(--text-action-primary);
    --origin-on-brand: var(--text-on-brand);
    --origin-primary-button-text: var(--text-action-primary);
    --origin-link: var(--text-link-default);
    --origin-link-hover: var(--text-link-hover);
    --origin-link-visited: var(--text-link-default);
    --origin-link-hover-on-primary: var(--text-link-hover);
    --origin-link-visited-on-primary: var(--text-link-default);
    --origin-error: var(--feedback-error-text);
    --origin-warning: var(--feedback-warning-text);
    --origin-success: var(--feedback-success-text);
    --origin-info: var(--feedback-info-text);
    --origin-neutral-indicator: var(--indicator-neutral);
    --origin-supporting-text: var(--text-secondary);
    --origin-timeline-supporting-text: var(--text-on-brand-inverse);
    --origin-mandatory: var(--indicator-critical);
    --origin-cancelled: var(--indicator-neutral);
    --origin-notification-badge: var(--indicator-critical);
    --origin-placeholder-color: var(--text-tertiary);
    --origin-field-label-interactive: var(--text-on-brand-inverse);
    --origin-selectbar-item-color: var(--text-tertiary);
    --origin-selectbar-item-color-active: var(--text-on-brand);
    --origin-menu-icon-color: var(--icon-brand);
    --origin-menu-icon-background-color: transparent;
    --origin-more-actions-button-color: var(--text-on-brand-inverse);
    --origin-more-actions-menu-hover: var(--text-action-primary);
    --origin-more-actions-menu-hover-background: var(--surface-interaction-action-primary);
    --origin-more-actions-menu-hover-border: var(--border-width-default) solid var(--border-interactive);
    --origin-profile-menu-background-color: var(--surface-interaction-action-primary);
    --origin-profile-menu-color: var(--text-action-primary);
    --origin-ask-cuido-answer: var(--text-primary);
    --origin-ask-cuido-answer-background: var(--surface-base-card-background);
    --origin-ask-cuido-question-option: var(--surface-base-card-background-nested);
    --origin-ask-cuido-question-option-hover: var(--surface-interaction-action-hover-outline);
    --origin-ask-cuido-question-suggestion-icon: var(--icon-brand);
    --origin-ask-cuido-list-item-hover: var(--surface-interaction-action-hover-outline);
    --origin-ask-cuido-selected: var(--surface-interaction-action-primary);

    /* Radzen semantic bridge */

    /* Core palette */
    --rz-primary: var(--surface-interaction-action-primary);
    --rz-primary-light: var(--surface-interaction-action-hover-primary);
    --rz-secondary: var(--surface-interaction-action-secondary);
    --rz-light: var(--surface-interaction-action-tertiary);
    --rz-danger: var(--feedback-error-surface);
    --rz-warning: var(--feedback-warning-surface);
    --rz-success: var(--feedback-success-surface);
    --rz-info: var(--feedback-info-surface);

    /* Foregrounds */
    --rz-text-color: var(--text-primary);
    --rz-text-secondary-color: var(--text-secondary);
    --rz-text-tertiary-color: var(--text-tertiary);
    --rz-text-disabled-color: var(--text-disabled);
    --rz-on-primary: var(--text-action-primary);
    --rz-on-primary-lighter: var(--text-action-primary);
    --rz-on-secondary: var(--text-action-secondary);
    --rz-on-light: var(--text-action-tertiary);
    --rz-on-danger: var(--feedback-error-text);
    --rz-on-warning: var(--feedback-warning-text);
    --rz-on-success: var(--feedback-success-text);
    --rz-on-info: var(--feedback-info-text);

    /* Application and containers */
    --rz-layout-body-background-color: var(--surface-base-page);
    --rz-card-background-color: var(--surface-base-card-background);
    --rz-panel-background-color: var(--surface-base-card-background);
    --rz-accordion-item-background-color: var(--surface-base-card-background);
    --rz-dialog-background-color: var(--surface-base-overlay-background);
    --rz-dialog-title-background-color: var(--surface-base-overlay-background);
    --rz-menu-background-color: var(--surface-base-overlay-background);
    --rz-profile-menu-background-color: var(--surface-base-page);
    --rz-profile-menu-top-item-background-color: var(--surface-base-page);
    --rz-dropdown-open-background-color: var(--surface-base-overlay-background);
    --rz-dropdown-item-hover-background-color: var(--surface-interaction-action-hover-outline);
    --rz-dropdown-item-hover-color: var(--text-primary);
    --rz-tooltip-background-color: var(--surface-base-overlay-background);
    --rz-tooltip-color: var(--text-primary);

    /* Fields */
    --rz-input-background-color: var(--surface-field-default);
    --rz-input-hover-background-color: var(--surface-field-default);
    --rz-input-focus-background-color: var(--surface-field-default);
    --rz-input-color: var(--text-primary);
    --rz-input-placeholder-color: var(--text-tertiary);
    --rz-input-border: var(--border-width-default) solid var(--border-default);
    --rz-input-hover-border-color: var(--border-interactive);
    --rz-input-focus-border-color: var(--border-focus);
    --rz-input-disabled-background-color: var(--surface-interaction-disabled);
    --rz-input-disabled-color: var(--text-disabled);
    --rz-input-disabled-border-color: var(--border-disabled);
    --rz-input-invalid-border-color: var(--border-error);
    --rz-form-field-label-floating-background-color: var(--surface-field-default);
    --rz-form-field-label-interactive-color: var(--text-on-brand-inverse);

    /* Data grid and pager */
    --rz-grid-background-color: var(--surface-field-table-field-background);
    --rz-grid-header-background-color: var(--surface-field-table-header-background);
    --rz-grid-header-color: var(--text-primary);
    --rz-grid-stripe-background-color: var(--surface-field-table-field-background-alt);
    --rz-grid-stripe-odd-background-color: var(--surface-field-table-field-background);
    --rz-grid-hover-background-color: var(--surface-interaction-action-hover-outline);
    --rz-grid-border-color: var(--border-subtle);
    --rz-grid-bottom-cell-border: var(--border-width-hairline) solid var(--border-subtle);
    --rz-grid-filter-color: var(--icon-supporting-secondary);
    --rz-grid-sort-icon-color: var(--icon-supporting-secondary);
    --rz-grid-frozen-cell-background-color: var(--surface-field-table-field-background);
    --rz-pager-background-color: var(--surface-base-page);
    --rz-pager-numeric-button-selected-background-color: var(--surface-interaction-action-primary);
    --rz-pager-numeric-button-selected-color: var(--text-action-primary);

    /* Navigation */
    --rz-panel-menu-item-background-color: var(--surface-base-page);
    --rz-panel-menu-item-hover-background-color: var(--surface-interaction-action-hover-outline);
    --rz-panel-menu-item-hover-color: var(--text-primary);
    --rz-panel-menu-item-active-background-color: var(--surface-interaction-action-primary);
    --rz-panel-menu-item-active-color: var(--text-action-primary);
    --rz-menu-border: var(--border-width-hairline) solid var(--border-subtle);
    --rz-tabs-tab-color: var(--text-disabled);
    --rz-tabs-tab-selected-color: var(--text-action-outline);
    --rz-tabs-tab-selected-background-color: transparent;

    /* Disabled and focus */
    --rz-border-width: var(--border-width-default);
    --rz-border-disabled: var(--rz-border-width) solid var(--border-disabled);
    --rz-focus-ring-color: var(--border-focus);

    /* Upload */
    --rz-upload-choose-background-color: var(--surface-base-card-background);

    /* Charts */
    --rz-series-1: var(--chart-series-1);
    --rz-series-2: var(--chart-series-2);
    --rz-series-3: var(--chart-series-3);
    --rz-series-4: var(--chart-series-4);
    --rz-series-5: var(--chart-series-5);
    --rz-series-6: var(--chart-series-6);
    --rz-series-7: var(--chart-series-7);
    --rz-series-8: var(--chart-series-8);
}

/* ========================================================================== */
/* Radzen button overrides                                                    */
/* ========================================================================== */

.rz-button.rz-primary.rz-shade-default:not(.rz-variant-outlined, .rz-variant-text) {
    color: var(--text-action-primary);
    background-color: var(--surface-interaction-action-primary);
    border: var(--border-width-default) solid transparent;
}

.rz-button.rz-primary.rz-shade-default:not(.rz-variant-outlined, .rz-variant-text, .rz-state-disabled):hover {
    color: var(--text-action-primary);
    background-color: var(--surface-interaction-action-hover-primary);
    background-image: none;
    box-shadow: none;
}

.rz-button.rz-primary.rz-shade-default:not(.rz-variant-outlined, .rz-variant-text, .rz-state-disabled):active {
    color: var(--text-action-primary);
    background-color: var(--surface-interaction-action-pressed);
    background-image: none;
    box-shadow: none;
}

.rz-button.rz-secondary.rz-shade-default:not(.rz-variant-outlined, .rz-variant-text) {
    color: var(--text-action-secondary);
    background-color: var(--surface-interaction-action-secondary);
    border: var(--border-width-default) solid var(--border-interaction-action-secondary);
}

.rz-button.rz-secondary.rz-shade-default:not(.rz-variant-outlined, .rz-variant-text, .rz-state-disabled):hover {
    color: var(--text-action-secondary);
    background-color: var(--surface-interaction-action-hover-secondary);
    background-image: none;
    box-shadow: none;
}

.rz-button.rz-secondary.rz-shade-default:not(.rz-variant-outlined, .rz-variant-text, .rz-state-disabled):active {
    color: var(--text-action-secondary);
    background-color: var(--surface-interaction-action-pressed-secondary);
    background-image: none;
    box-shadow: none;
}

.rz-button-icon-only {
    display: inline-flex;
}

/* Add button-tertiary to the Radzen button Class attribute. */
.rz-button.button-tertiary:not(.rz-variant-outlined, .rz-variant-text) {
    color: var(--text-action-tertiary);
    background-color: var(--surface-interaction-action-tertiary);
    border: var(--border-width-default) solid transparent;
}

.rz-button.button-tertiary:not(.rz-variant-outlined, .rz-variant-text, .rz-state-disabled):hover {
    color: var(--text-action-tertiary);
    background-color: var(--surface-interaction-action-hover-tertiary);
    background-image: none;
    box-shadow: none;
}

.rz-button.button-tertiary:not(.rz-variant-outlined, .rz-variant-text, .rz-state-disabled):active {
    color: var(--text-action-tertiary);
    background-color: var(--surface-interaction-action-pressed-tertiary);
    background-image: none;
    box-shadow: none;
}

.rz-button.rz-variant-outlined.rz-primary.rz-shade-default {
    color: var(--text-action-outline);
    background-color: var(--surface-interaction-action-outline);
    background-image: none;
    border: var(--border-width-default) solid var(--border-interaction-action-outline);
    box-shadow: none;
}

.rz-button.rz-variant-outlined.rz-primary.rz-shade-default:not(.rz-state-disabled):hover {
    color: var(--text-action-outline);
    background-color: var(--surface-interaction-action-hover-outline);
    background-image: none;
    border-color: var(--border-interaction-action-outline);
    box-shadow: none;
}

.rz-button.rz-variant-outlined.rz-primary.rz-shade-default:not(.rz-state-disabled):active {
    color: var(--text-action-outline);
    background-color: var(--surface-interaction-action-pressed-outline);
    background-image: none;
    border-color: var(--border-interaction-action-outline);
    box-shadow: none;
}

/* Radzen primary text buttons implement the Figma Ghost variant. */
.rz-button.rz-primary.rz-variant-text.rz-shade-default {
    color: var(--text-action-outline);
    background-color: var(--surface-interaction-action-outline);
    border-color: transparent;
}

.rz-button.rz-primary.rz-variant-text.rz-shade-default:not(.rz-state-disabled):hover {
    color: var(--text-action-outline);
    background-color: var(--surface-interaction-action-hover-outline);
    border-color: transparent;
}

.rz-button.rz-primary.rz-variant-text.rz-shade-default:not(.rz-state-disabled):active {
    color: var(--text-action-outline);
    background-color: var(--surface-interaction-action-pressed-outline);
    border-color: transparent;
}

.rz-button.rz-primary.rz-variant-text.rz-shade-default:is(
    .rz-state-loading,
    .rz-busy,
    [aria-busy="true"]
) {
    color: var(--text-action-outline);
    background-color: var(--surface-interaction-action-outline);
    border-color: transparent;
    cursor: progress;
}

.rz-button.rz-primary.rz-shade-default:is(.rz-variant-outlined, .rz-variant-text)
    :where(.rzi, .rz-icon) {
    color: var(--icon-interactive-action-outline);
}

.rz-button.rz-danger.rz-shade-default:not(.rz-variant-outlined, .rz-variant-text) {
    color: var(--text-action-on-destructive);
    background-color: var(--surface-interaction-action-destructive);
    border: var(--border-width-default) solid transparent;
}

.rz-button.rz-danger.rz-shade-default:not(.rz-variant-outlined, .rz-variant-text, .rz-state-disabled):hover {
    color: var(--text-action-on-destructive);
    background-color: var(--surface-interaction-action-hover-destructive);
    background-image: none;
    box-shadow: none;
}

.rz-button.rz-danger.rz-shade-default:not(.rz-variant-outlined, .rz-variant-text, .rz-state-disabled):active {
    color: var(--text-action-on-destructive);
    background-color: var(--surface-interaction-action-pressed-destructive);
    background-image: none;
    box-shadow: none;
}

.rz-button:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    background-image: none;
    box-shadow: none;
}

.rz-button.rz-state-disabled,
.rz-button:disabled {
    color: var(--text-disabled) !important;
    background-color: var(--surface-interaction-disabled) !important;
    border-color: var(--border-disabled) !important;
    box-shadow: none !important;
    opacity: 1;
    cursor: not-allowed;
}

/* Ghost focus follows the component specification rather than the generic
   button outline: hover surface, on-action foreground and semantic focus FX. */
.rz-button.rz-primary.rz-variant-text.rz-shade-default:not(.rz-state-disabled):is(
    :focus-visible,
    .rz-state-focused
) {
    color: var(--text-action-on-action);
    background-color: var(--surface-interaction-action-hover-outline);
    border-color: transparent;
    outline: none;
    box-shadow: var(--focus-action-skeuomorphic);
}

.rz-button.rz-primary.rz-variant-text.rz-shade-default:not(.rz-state-disabled):is(
    :focus-visible,
    .rz-state-focused
) :where(.rzi, .rz-icon) {
    color: var(--icon-interactive-on-action);
}

/* Ghost disabled remains transparent, unlike disabled filled buttons. */
.rz-button.rz-primary.rz-variant-text.rz-shade-default:is(
    .rz-state-disabled,
    :disabled
) {
    color: var(--text-disabled) !important;
    background-color: var(--surface-interaction-action-outline) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    opacity: 1;
    cursor: not-allowed;
}

.rz-button.rz-primary.rz-variant-text.rz-shade-default:is(
    .rz-state-disabled,
    :disabled
) :where(.rzi, .rz-icon) {
    color: var(--icon-disabled) !important;
}

/* ========================================================================== */
/* Radzen tabs and badges                                                     */
/* States: unselected, unselected hover, selected and disabled.              */
/* Selected tabs intentionally have no separate hover treatment.              */
/* ========================================================================== */

/* Unselected */
.rz-tabview.rz-tabview-top > .rz-tabview-nav > li:not(
    .rz-tabview-selected,
    .rz-state-disabled,
    [aria-disabled="true"]
) {
    color: var(--text-disabled);
    background-color: transparent;
    border-bottom-color: var(--border-disabled);
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav > li:not(
    .rz-tabview-selected,
    .rz-state-disabled,
    [aria-disabled="true"]
) :where(.rzi, .rz-icon) {
    color: var(--icon-disabled);
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav > li:not(
    .rz-tabview-selected,
    .rz-state-disabled,
    [aria-disabled="true"]
) .tab-nav-badge {
    color: var(--text-on-indicator-badge-neutral);
    background-color: var(--surface-indicator-badge-neutral);
}

/* Unselected hover */
.rz-tabview.rz-tabview-top > .rz-tabview-nav > li:not(
    .rz-tabview-selected,
    .rz-state-disabled,
    [aria-disabled="true"]
):hover {
    color: var(--text-action-outline);
    background-color: var(--surface-interaction-action-hover-outline);
    border-bottom-color: var(--border-interactive);
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav > li:not(
    .rz-tabview-selected,
    .rz-state-disabled,
    [aria-disabled="true"]
):hover :where(.rzi, .rz-icon) {
    color: var(--icon-interactive-action-outline);
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav > li:not(
    .rz-tabview-selected,
    .rz-state-disabled,
    [aria-disabled="true"]
):hover .tab-nav-badge {
    color: var(--text-on-indicator-badge-brand);
    background-color: var(--surface-indicator-badge-brand-hover);
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav > li:not(
    .rz-tabview-selected,
    .rz-state-disabled,
    [aria-disabled="true"]
):hover:after {
    background: var(--surface-indicator-badge-brand-hover);
}

/* Selected */
.rz-tabview.rz-tabview-top > .rz-tabview-nav > li.rz-tabview-selected {
    color: var(--text-action-outline);
    background-color: transparent;
    border-bottom-color: var(--border-navigation-selected);
    cursor: default;
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav > li.rz-tabview-selected :where(.rzi, .rz-icon) {
    color: var(--icon-interactive-action-outline);
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav > li.rz-tabview-selected .tab-nav-badge {
    color: var(--text-on-indicator-badge-brand);
    background-color: var(--surface-indicator-badge-brand);
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav > li.rz-tabview-selected:after {
    background: var(--icon-interactive-action-outline);
}

/* Disabled */
.rz-tabview.rz-tabview-top > .rz-tabview-nav > li:is(
    .rz-state-disabled,
    [aria-disabled="true"]
) {
    color: var(--text-disabled);
    background-color: transparent;
    border-bottom-color: var(--border-disabled);
    pointer-events: none;
    cursor: not-allowed;
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav > li:is(.rz-state-disabled, [aria-disabled="true"])
    :where(.rzi, .rz-icon) {
    color: var(--icon-disabled);
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav > li:is(.rz-state-disabled, [aria-disabled="true"])
    .tab-nav-badge {
    color: var(--text-disabled);
    background-color: var(--surface-interaction-disabled);
}

/* Ask Cuido generated-answer surface.
   The repeated class matches Blazor's scoped selector specificity. */
.question-answer.question-answer {
    background-color: var(--origin-ask-cuido-answer-background);
}

/* Ellipsis/more-actions trigger.
   The glyph inherits currentColor from this semantic bridge. */
.more-actions-btn {
    color: var(--origin-more-actions-button-color);
}

/* Radzen Timeline supporting text.
   The local legacy-token remap corrects existing inline
   color: var(--origin-primary) without changing Timeline markers or axes. */
.rz-timeline .supporting-text {
    --origin-primary: var(--origin-timeline-supporting-text);
    color: var(--origin-timeline-supporting-text);
}

/* ========================================================================== */
/* Form-field labels                                                         */
/* Keep hover and focus legible without coupling labels to Radzen primary.   */
/* ========================================================================== */

.rz-form-field:not(.rz-state-disabled):hover .rz-form-field-label,
.rz-form-field:not(.rz-state-disabled):focus-within .rz-form-field-label,
.rz-form-field.rz-state-focused:not(.rz-state-disabled) .rz-form-field-label {
    color: var(--rz-form-field-label-interactive-color);
}

/* ========================================================================== */
/* Minimal document-level application                                         */
/* ========================================================================== */

html,
body,
.rz-layout {
    color: var(--text-primary);
    background-color: var(--surface-base-page);
}

a {
    color: var(--text-link-default);
}

a:hover {
    color: var(--text-link-hover);
}

dialog::backdrop,
.rz-dialog-mask {
    background-color: var(--surface-base-backdrop);
}