:root {
    --si-brand: #340056;
    --si-shell-bg: #340056;
    --si-shell-h: 46px;
    --si-side-w: 212px;
    --si-rail-w: 52px;
    --si-shell-fg: #d6cbe2;
    --si-shell-muted: #9b8bb0;
    --si-shell-hover: rgba(255, 255, 255, 0.06);
    --si-shell-active-bg: rgba(255, 255, 255, 0.11);
    --si-shell-active-fg: #ffffff;
    --si-shell-active-icon: #e2c774;
    --si-shell-line: rgba(255, 255, 255, 0.08);
    --si-shell-outdated: #ffb4a8;
    --si-badge-bg: #d7b866;
    --si-badge-fg: #340056;
    --si-nav-admin: #a8c8ff;
    --si-nav-tenant: #f2b48a;
    --si-primary: #4a1872;
    --si-primary-hover: #340056;
    --si-primary-tint: #f3ecf9;
    --si-primary-ink: #4a1872;
    --si-accent: #d7b866;
    --si-accent-line: #a16e25;
    --si-canvas: #f5f3f7;
    --si-surface: #ffffff;
    --si-sunken: #f8f7fa;
    --si-line: #e7e2ec;
    --si-line-strong: #cfc7d9;
    --si-bubble: #e6e1ec;
    --si-ink: #221a2b;
    --si-muted: #685f73;
    --si-faint: #766d81;
    --si-success: #1b7547;
    --si-success-tint: #e5f3eb;
    --si-warning: #8a5000;
    --si-warning-tint: #fcf0dc;
    --si-danger: #b3261e;
    --si-danger-tint: #fbe9e8;
    --si-info: #0b6aa8;
    --si-info-tint: #e3f1fa;
    --si-edge: #9a8fa6;
    /* Flow node kinds differ in lightness as well as hue; darkest to lightest: exit, start, send, logic, wait, data. */
    --si-node-exit: #3a3542;
    --si-node-exit-ink: #ffffff;
    --si-node-start: #6b3fa0;
    --si-node-start-ink: #ffffff;
    --si-node-send: #2f78c4;
    --si-node-send-ink: #ffffff;
    --si-node-logic: #4cb5a3;
    --si-node-logic-ink: #0b3b33;
    --si-node-wait: #f0b84d;
    --si-node-wait-ink: #4f3200;
    --si-node-data: #f7d3e3;
    --si-node-data-ink: #8a1f52;
    --si-focus-ring: rgba(74, 24, 114, 0.18);
    --si-shadow-pop: 0 8px 24px rgba(20, 8, 30, 0.16);
    --si-shadow-tint: rgba(20, 8, 30, 0.24);
    --si-scrim: rgba(20, 8, 30, 0.32);
    --si-radius: 5px;
    --si-radius-lg: 6px;
    --si-control-h: 1.75rem;
    --si-font: Arial, Helvetica, sans-serif;
    --si-font-size: 0.8125rem;

    --rz-text-font-family: var(--si-font);
    --rz-body-font-size: var(--si-font-size);
    --rz-body-background-color: var(--si-canvas);
    --rz-base-background-color: var(--si-surface);
    --rz-text-color: var(--si-ink);
    --rz-text-title-color: var(--si-ink);
    --rz-text-secondary-color: var(--si-muted);
    --rz-text-tertiary-color: var(--si-faint);

    --rz-primary: var(--si-primary);
    --rz-primary-light: #6a3a93;
    --rz-primary-lighter: var(--si-primary-tint);
    --rz-primary-dark: var(--si-primary-hover);
    --rz-primary-darker: #24003c;
    --rz-on-primary: #ffffff;
    --rz-on-primary-lighter: var(--si-primary-ink);
    --rz-secondary: #6a3a93;
    --rz-secondary-light: #8a5bb0;
    --rz-secondary-lighter: var(--si-primary-tint);
    --rz-on-secondary-lighter: var(--si-primary-ink);
    --rz-secondary-dark: #4a1872;
    --rz-on-secondary: #ffffff;
    --rz-success: var(--si-success);
    --rz-success-lighter: var(--si-success-tint);
    --rz-on-success-lighter: var(--si-success);
    --rz-on-success-light: #221a2b;
    --rz-warning: var(--si-warning);
    --rz-warning-lighter: var(--si-warning-tint);
    --rz-on-warning: #ffffff;
    --rz-on-warning-lighter: var(--si-warning);
    --rz-on-warning-light: #221a2b;
    --rz-danger: var(--si-danger);
    --rz-danger-lighter: var(--si-danger-tint);
    --rz-on-danger-lighter: var(--si-danger);
    --rz-on-danger-light: #221a2b;
    --rz-danger-light: #ee6a77;
    --rz-info: var(--si-info);
    --rz-info-lighter: var(--si-info-tint);
    --rz-on-info-lighter: var(--si-info);
    --rz-on-info-light: #221a2b;

    --rz-border-radius: var(--si-radius);
    --rz-button-border-radius: var(--si-radius);
    --rz-input-border-radius: var(--si-radius);
    --rz-card-border-radius: var(--si-radius-lg);
    --rz-input-height: var(--si-control-h);
    --rz-input-size-md: var(--si-control-h);
    --rz-button-size-md: var(--si-control-h);
    --rz-input-border: 1px solid var(--si-line-strong);
    --rz-input-border-block-end: var(--rz-input-border);
    --rz-input-hover-border: 1px solid var(--si-faint);
    --rz-input-focus-border: 1px solid var(--si-primary);
    --rz-input-focus-shadow: 0 0 0 3px var(--si-focus-ring);
    --rz-input-background-color: var(--si-surface);
    --rz-selectbar-background-color: var(--si-surface);
    --rz-selectbar-selected-background-color: var(--si-primary);
    --rz-selectbar-selected-color: var(--rz-on-primary);
    --rz-panel-background-color: var(--si-surface);
    --rz-card-background-color: var(--si-surface);

    --rz-grid-background-color: var(--si-surface);
    --rz-grid-header-background-color: var(--si-sunken);
    --rz-grid-frozen-cell-background-color: var(--si-sunken);
    --rz-grid-header-color: var(--si-muted);
    --rz-grid-header-font-weight: 600;
    --rz-grid-header-text-transform: none;
    --rz-grid-hover-background-color: var(--si-primary-tint);
    --rz-grid-selected-background-color: var(--si-primary-tint);
    --rz-grid-stripe-background-color: var(--si-sunken);
    --rz-grid-cell-border: 1px solid var(--si-line);
    --rz-grid-border: 1px solid var(--si-line);

    --rz-sidebar-width: 200px;
}

html:not([data-theme="dark"]) {
    --rz-base: #e7e2ec;
    --rz-base-50: #ffffff;
    --rz-base-100: #f8f7fa;
    --rz-base-200: #f0edf3;
    --rz-base-300: #e7e2ec;
    --rz-base-400: #cfc7d9;
    --rz-base-500: #948b9e;
    --rz-base-600: #685f73;
    --rz-base-700: #4a4252;
    --rz-base-800: #2e2734;
    --rz-base-900: #221a2b;
}

html[data-theme="dark"] {
    --si-shell-bg: #1d0a30;
    --si-primary: #8a5bc9;
    --si-primary-hover: #9a6dd6;
    --si-primary-tint: #271e33;
    --si-primary-ink: #cfb4ef;
    --si-accent-line: #d7b866;
    --si-canvas: #131017;
    --si-surface: #1b1720;
    --si-sunken: #18141c;
    --si-line: #2d2634;
    --si-line-strong: #43394d;
    --si-bubble: #3d3447;
    --si-ink: #ede7f3;
    --si-muted: #a99fb4;
    --si-faint: #8c8298;
    --si-success: #62c592;
    --si-success-tint: #16301f;
    --si-warning: #f0b75c;
    --si-warning-tint: #34270f;
    --si-danger: #f2877c;
    --si-danger-tint: #3b1c1a;
    --si-info: #6cc0f2;
    --si-info-tint: #14283a;
    --si-edge: #6d6279;
    --si-node-exit: #5a5466;
    --si-node-exit-ink: #ffffff;
    --si-node-start: #8a5bc9;
    --si-node-start-ink: #ffffff;
    --si-node-send: #4f93dc;
    --si-node-send-ink: #08213d;
    --si-node-logic: #57c2ae;
    --si-node-logic-ink: #06302a;
    --si-node-wait: #f2c46e;
    --si-node-wait-ink: #3d2700;
    --si-node-data: #f9dbe8;
    --si-node-data-ink: #6e1840;
    --si-focus-ring: rgba(138, 91, 201, 0.35);
    --si-shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.5);
    --si-shadow-tint: rgba(0, 0, 0, 0.5);
    --si-scrim: rgba(0, 0, 0, 0.55);
    --rz-primary-light: #a37fd6;
    --rz-primary-darker: #6a3a93;
    --rz-on-warning: #1b1720;
    --rz-on-info: #1b1720;
    --rz-on-success: #1b1720;
    --rz-on-danger: #1b1720;
    --rz-base-500: #5d5f64;
    --rz-secondary: #7a52b0;
    --rz-link-color: var(--si-primary-ink);
    --rz-link-hover-color: var(--si-primary-ink);
    --rz-datepicker-calendar-today-color: var(--si-primary-ink);
    color-scheme: dark;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: var(--si-font);
    font-size: var(--si-font-size);
    line-height: 1.4;
    color: var(--si-ink);
    background: var(--si-canvas);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5rem;
    font-weight: 650;
    line-height: 1.2;
    color: var(--si-ink);
}

h1 { font-size: 1.25rem; }
h2 { font-size: 1rem; }
h3 { font-size: 0.9375rem; }

p { margin: 0 0 0.75rem; }

a { color: var(--si-primary-ink); }

hr {
    border: 0;
    border-top: 1px solid var(--si-line);
    margin: 1rem 0;
}

img, svg { vertical-align: middle; }

button, input, select, textarea { font: inherit; }

.rz-button {
    text-transform: none;
    letter-spacing: normal;
}

.rz-button-md {
    padding: 0.25rem 0.75rem;
    font-size: var(--si-font-size);
}

.rz-button-sm {
    padding: 0.125rem 0.5rem;
}

:focus-visible {
    outline: 2px solid var(--si-primary);
    outline-offset: 1px;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--si-line-strong) transparent;
}

@media (pointer: coarse) {
    :root {
        --si-control-h: 2.5rem;
    }
}