/* THIS FILE IS AUTO-GENERATED. DO NOT EDIT. CONTENTS CAN BE CHANGED IN YOUR THEME CONFIG. */

/* Shared styles */
.cui-light,
.cui-dark {
  --body-font-family: var(--font-family-base);
  --body-font-size: var(--font-size-base400);
  --body-font-weight: var(--font-weight-regular);
  --body-line-height: var(--line-height-md);
  --default-border: var(--default-border-size) var(--default-border-color)
    var(--default-border-style);
  --default-border-size: var(--border-width-thin);
  --default-border-style: solid;
  --button-bg-color: var(--neutral-background1);
  --button-border-color: var(--neutral-stroke1);
  --button-border-size: var(--border-width-thin);
  --button-border-style: solid;
  --button-border-radius: var(--border-radius-md);
  --button-fg-color: var(--neutral-foreground1);
  --button-font-weight: var(--font-weight-regular);
  --button-padding-x: var(--spacing-md);
  --button-padding-y: var(--spacing-s-nudge);
  --button-shadow: var(--shadow-0);
  --button-active-bg-color: var(--neutral-background1pressed);
  --button-active-shadow: var(--shadow-0);
  --button-disabled-shadow: var(--shadow-0);
  --button-focus-shadow: var(--shadow-0);
  --button-hover-shadow: var(--shadow-0);
  --form-border-color: inherit;
  --form-border-size: inherit;
  --form-border-style: inherit;
  --form-border-radius: inherit;
  --form-bg-color: inherit;
  --form-content-gap: inherit;
  --form-padding-x: inherit;
  --form-padding-y: inherit;
  --form-control-bg-color: var(--neutral-background1);
  --form-control-border-color: var(--neutral-stroke1);
  --form-control-border-radius: var(--border-radius-md);
  --form-control-border-size: var(--border-width-thin);
  --form-control-border-style: solid;
  --form-control-fg-color: var(--neutral-foreground1);
  --form-control-font-size: var(--font-size-base300);
  --form-control-icon-gap: var(--spacing-xxs);
  --form-control-input-height: 32px;
  --form-control-placeholder-color: var(--neutral-foreground4);
  --form-control-padding-x: var(--spacing-m-nudge);
  --form-control-padding-y: var(--spacing-none);
  --form-control-disabled-bg-color: transparent;
  --form-control-disabled-border-color: var(--neutral-stroke-disabled);
  --form-control-disabled-fg-color: var(--neutral-foreground-disabled);
  --form-control-disabled-opacity: 1;
  --form-control-disabled-placeholder-color: var(--neutral-foreground-disabled);
  --form-control-invalid-bg-color: var(--neutral-background1);
  --form-control-invalid-fg-color: var(--neutral-foreground1);
  --form-control-invalid-placeholder-color: var(--neutral-foreground4);
  --form-control-invalid-message-fg-color: var(--color-danger-primary);
  --form-control-focus-bg-color: var(--neutral-background1);
  --form-control-focus-border-color: var(--neutral-stroke1);
  --form-control-focus-fg-color: var(--neutral-foreground1);
  --form-control-help-text-fg-color: var(--neutral-foreground1);
  --form-control-help-text-font-size: var(--font-size-base300);
  --form-control-help-text-font-weight: var(--font-weight-regular);
  --form-control-help-text-gap: var(--spacing-xxs);
  --form-control-label-fg-color: var(--neutral-foreground1);
  --form-control-label-font-size: var(--font-size-base300);
  --form-control-label-font-weight: var(--font-weight-regular);
  --form-control-label-gap: var(--spacing-xxs);
  --form-control-label-required-indicator-gap: var(--spacing-xxs);
  --heading-fg-color: inherit;
  --heading-font-family: inherit;
  --heading-font-weight: var(--font-weight-semi-bold);
  --heading-line-height: var(--line-height-sm);
  --link-fg-color: var(--brand-foreground-link);
  --link-decoration: none;
  --link-active-fg-color: var(--brand-foreground-link-pressed);
  --link-active-decoration: underline;
  --link-hover-fg-color: var(--brand-foreground-link-hover);
  --link-hover-decoration: underline;
  --link-focus-fg-color: var(--brand-foreground-link-selected);
  --link-focus-decoration: underline;
  --link-visited-fg-color: var(--brand-foreground-link);
  --link-visited-decoration: none;
  --link-disabled-fg-color: var(--neutral-foreground-disabled);
  --link-disabled-decoration: none;
  --focus-outline: var(--focus-outline-size) var(--focus-outline-color)
    var(--focus-outline-style);
  --focus-outline-color: var(--stroke-focus2);
  --focus-outline-offset: var(--spacing-xxs);
  --focus-outline-size: var(--border-width-thick);
  --focus-outline-style: solid;
  --neutral-foreground-inverted-disabled: rgba(255, 255, 255, 0.4);
  --neutral-background-alpha: rgba(255, 255, 255, 0.5);
  --neutral-background-alpha2: rgba(255, 255, 255, 0.8);
  --subtle-background: transparent;
  --subtle-background-light-alpha-hover: rgba(255, 255, 255, 0.7);
  --subtle-background-light-alpha-pressed: rgba(255, 255, 255, 0.5);
  --subtle-background-light-alpha-selected: transparent;
  --subtle-background-inverted: transparent;
  --subtle-background-inverted-hover: rgba(0, 0, 0, 0.1);
  --subtle-background-inverted-pressed: rgba(0, 0, 0, 0.3);
  --subtle-background-inverted-selected: rgba(0, 0, 0, 0.2);
  --transparent-background: transparent;
  --transparent-background-hover: transparent;
  --transparent-background-pressed: transparent;
  --transparent-background-selected: transparent;
  --neutral-background-inverted-disabled: rgba(255, 255, 255, 0.1);
  --neutral-stencil1alpha: rgba(0, 0, 0, 0.1);
  --neutral-stencil2alpha: rgba(0, 0, 0, 0.05);
  --background-overlay: rgba(0, 0, 0, 0.4);
  --scrollbar-overlay: rgba(0, 0, 0, 0.5);
  --neutral-stroke-inverted-disabled: rgba(255, 255, 255, 0.4);
  --transparent-stroke: transparent;
  --transparent-stroke-interactive: transparent;
  --transparent-stroke-disabled: transparent;
  --neutral-stroke-alpha: rgba(0, 0, 0, 0.05);
  --border-radius-none: 0;
  --border-radius-sm: 2px;
  --border-radius-md: 4px;
  --border-radius-lg: 6px;
  --border-radius-xl: 8px;
  --border-radius-circular: 10000px;
  --border-width-none: 0;
  --border-width-thin: 1px;
  --border-width-thick: 2px;
  --border-width-thicker: 3px;
  --border-width-thickest: 4px;
  --color-brand-10: #061724;
  --color-brand-10-alt: white;
  --color-brand-20: #082338;
  --color-brand-20-alt: white;
  --color-brand-30: #0a2e4a;
  --color-brand-30-alt: white;
  --color-brand-40: #0c3b5e;
  --color-brand-40-alt: white;
  --color-brand-50: #0e4775;
  --color-brand-50-alt: white;
  --color-brand-60: #0f548c;
  --color-brand-60-alt: white;
  --color-brand-70: #115ea3;
  --color-brand-70-alt: white;
  --color-brand-80: #0f6cbd;
  --color-brand-80-alt: white;
  --color-brand-90: #2886de;
  --color-brand-90-alt: black;
  --color-brand-100: #479ef5;
  --color-brand-100-alt: black;
  --color-brand-110: #62abf5;
  --color-brand-110-alt: black;
  --color-brand-120: #77b7f7;
  --color-brand-120-alt: black;
  --color-brand-130: #96c6fa;
  --color-brand-130-alt: black;
  --color-brand-140: #b4d6fa;
  --color-brand-140-alt: black;
  --color-brand-150: #cfe4fa;
  --color-brand-150-alt: black;
  --color-brand-160: #ebf3fc;
  --color-brand-160-alt: black;
  --color-danger-shade-50: #200205;
  --color-danger-shade-50-alt: white;
  --color-danger-shade-40: #3b0509;
  --color-danger-shade-40-alt: white;
  --color-danger-shade-30: #6e0811;
  --color-danger-shade-30-alt: white;
  --color-danger-shade-20: #960b18;
  --color-danger-shade-20-alt: white;
  --color-danger-shade-10: #b10e1c;
  --color-danger-shade-10-alt: white;
  --color-danger-primary: #c50f1f;
  --color-danger-primary-alt: white;
  --color-danger-tint-10: #cc2635;
  --color-danger-tint-10-alt: white;
  --color-danger-tint-20: #d33f4c;
  --color-danger-tint-20-alt: black;
  --color-danger-tint-30: #dc626d;
  --color-danger-tint-30-alt: black;
  --color-danger-tint-40: #eeacb2;
  --color-danger-tint-40-alt: black;
  --color-danger-tint-50: #f6d1d5;
  --color-danger-tint-50-alt: black;
  --color-danger-tint-60: #fdf3f4;
  --color-danger-tint-60-alt: black;
  --color-success-shade-50: #031403;
  --color-success-shade-50-alt: white;
  --color-success-shade-40: #052505;
  --color-success-shade-40-alt: white;
  --color-success-shade-30: #094509;
  --color-success-shade-30-alt: white;
  --color-success-shade-20: #0c5e0c;
  --color-success-shade-20-alt: white;
  --color-success-shade-10: #0e700e;
  --color-success-shade-10-alt: white;
  --color-success-primary: #107c10;
  --color-success-primary-alt: white;
  --color-success-tint-10: #218c21;
  --color-success-tint-10-alt: black;
  --color-success-tint-20: #359b35;
  --color-success-tint-20-alt: black;
  --color-success-tint-30: #54b054;
  --color-success-tint-30-alt: black;
  --color-success-tint-40: #9fd89f;
  --color-success-tint-40-alt: black;
  --color-success-tint-50: #c9eac9;
  --color-success-tint-50-alt: black;
  --color-success-tint-60: #f1faf1;
  --color-success-tint-60-alt: black;
  --color-warning-shade-50: #271002;
  --color-warning-shade-50-alt: white;
  --color-warning-shade-40: #4a1e04;
  --color-warning-shade-40-alt: white;
  --color-warning-shade-30: #8a3707;
  --color-warning-shade-30-alt: white;
  --color-warning-shade-20: #bc4b09;
  --color-warning-shade-20-alt: white;
  --color-warning-shade-10: #de590b;
  --color-warning-shade-10-alt: black;
  --color-warning-primary: #f7630c;
  --color-warning-primary-alt: black;
  --color-warning-tint-10: #f87528;
  --color-warning-tint-10-alt: black;
  --color-warning-tint-20: #f98845;
  --color-warning-tint-20-alt: black;
  --color-warning-tint-30: #faa06b;
  --color-warning-tint-30-alt: black;
  --color-warning-tint-40: #fdcfb4;
  --color-warning-tint-40-alt: black;
  --color-warning-tint-50: #fee5d7;
  --color-warning-tint-50-alt: black;
  --color-warning-tint-60: #fff9f5;
  --color-warning-tint-60-alt: black;
  --color-caution-shade-50: #2b1a00;
  --color-caution-shade-50-alt: white;
  --color-caution-shade-40: #463100;
  --color-caution-shade-40-alt: white;
  --color-caution-shade-30: #835b00;
  --color-caution-shade-30-alt: white;
  --color-caution-shade-20: #b27c00;
  --color-caution-shade-20-alt: black;
  --color-caution-shade-10: #d39300;
  --color-caution-shade-10-alt: black;
  --color-caution-primary: #eaa300;
  --color-caution-primary-alt: black;
  --color-caution-tint-10: #edad1c;
  --color-caution-tint-10-alt: black;
  --color-caution-tint-20: #efb839;
  --color-caution-tint-20-alt: black;
  --color-caution-tint-30: #f2c661;
  --color-caution-tint-30-alt: black;
  --color-caution-tint-40: #f9e2ae;
  --color-caution-tint-40-alt: black;
  --color-caution-tint-50: #fcefd3;
  --color-caution-tint-50-alt: black;
  --color-caution-tint-60: #fefbf4;
  --color-caution-tint-60-alt: black;
  --color-highlight-1: #1ae0ff;
  --color-highlight-1-alt: black;
  --color-neutral-0: #000000;
  --color-neutral-0-alt: white;
  --color-neutral-2: #050505;
  --color-neutral-2-alt: white;
  --color-neutral-4: #0a0a0a;
  --color-neutral-4-alt: white;
  --color-neutral-6: #0f0f0f;
  --color-neutral-6-alt: white;
  --color-neutral-8: #141414;
  --color-neutral-8-alt: white;
  --color-neutral-10: #1a1a1a;
  --color-neutral-10-alt: white;
  --color-neutral-12: #1f1f1f;
  --color-neutral-12-alt: white;
  --color-neutral-14: #242424;
  --color-neutral-14-alt: white;
  --color-neutral-16: #202020;
  --color-neutral-16-alt: white;
  --color-neutral-18: #2e2e2e;
  --color-neutral-18-alt: white;
  --color-neutral-20: #333333;
  --color-neutral-20-alt: white;
  --color-neutral-22: #383838;
  --color-neutral-22-alt: white;
  --color-neutral-24: #3d3d3d;
  --color-neutral-24-alt: white;
  --color-neutral-26: #424242;
  --color-neutral-26-alt: white;
  --color-neutral-28: #474747;
  --color-neutral-28-alt: white;
  --color-neutral-30: #4d4d4d;
  --color-neutral-30-alt: white;
  --color-neutral-32: #525252;
  --color-neutral-32-alt: white;
  --color-neutral-34: #575757;
  --color-neutral-34-alt: white;
  --color-neutral-36: #5c5c5c;
  --color-neutral-36-alt: white;
  --color-neutral-38: #616161;
  --color-neutral-38-alt: white;
  --color-neutral-40: #666666;
  --color-neutral-40-alt: white;
  --color-neutral-42: #6b6b6b;
  --color-neutral-42-alt: white;
  --color-neutral-44: #707070;
  --color-neutral-44-alt: white;
  --color-neutral-46: #757575;
  --color-neutral-46-alt: white;
  --color-neutral-48: #7a7a7a;
  --color-neutral-48-alt: black;
  --color-neutral-50: #808080;
  --color-neutral-50-alt: black;
  --color-neutral-52: #858585;
  --color-neutral-52-alt: black;
  --color-neutral-54: #8a8a8a;
  --color-neutral-54-alt: black;
  --color-neutral-56: #8f8f8f;
  --color-neutral-56-alt: black;
  --color-neutral-58: #949494;
  --color-neutral-58-alt: black;
  --color-neutral-60: #999999;
  --color-neutral-60-alt: black;
  --color-neutral-62: #9e9e9e;
  --color-neutral-62-alt: black;
  --color-neutral-64: #a3a3a4;
  --color-neutral-64-alt: black;
  --color-neutral-66: #a8a8a8;
  --color-neutral-66-alt: black;
  --color-neutral-68: #adadad;
  --color-neutral-68-alt: black;
  --color-neutral-70: #b3b3b3;
  --color-neutral-70-alt: black;
  --color-neutral-72: #b8b8b8;
  --color-neutral-72-alt: black;
  --color-neutral-74: #bdbdbd;
  --color-neutral-74-alt: black;
  --color-neutral-76: #c2c2c2;
  --color-neutral-76-alt: black;
  --color-neutral-78: #c7c7c7;
  --color-neutral-78-alt: black;
  --color-neutral-80: #cccccc;
  --color-neutral-80-alt: black;
  --color-neutral-82: #d1d1d1;
  --color-neutral-82-alt: black;
  --color-neutral-84: #d6d6d6;
  --color-neutral-84-alt: black;
  --color-neutral-86: #dbdbdb;
  --color-neutral-86-alt: black;
  --color-neutral-88: #e0e0e0;
  --color-neutral-88-alt: black;
  --color-neutral-90: #e6e6e6;
  --color-neutral-90-alt: black;
  --color-neutral-92: #ebebeb;
  --color-neutral-92-alt: black;
  --color-neutral-94: #f0f0f0;
  --color-neutral-94-alt: black;
  --color-neutral-96: #f5f5f5;
  --color-neutral-96-alt: black;
  --color-neutral-98: #fafafa;
  --color-neutral-98-alt: black;
  --color-neutral-100: #ffffff;
  --color-neutral-100-alt: black;
  --duration-ultra-fast: 50ms;
  --duration-faster: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-gentle: 250ms;
  --duration-slow: 300ms;
  --duration-slower: 400ms;
  --duration-ultra-slow: 500ms;
  --font-family-base:
    "Segoe UI", "Segoe UI Web (West European)", -apple-system,
    BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --font-family-numeric:
    Bahnschrift, "Segoe UI", "Segoe UI Web (West European)", -apple-system,
    BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --font-family-monospace: Consolas, "Courier New", Courier, monospace;
  --font-size-base100: 10px;
  --font-size-base200: 12px;
  --font-size-base300: 14px;
  --font-size-base400: 16px;
  --font-size-base500: 20px;
  --font-size-base600: 24px;
  --font-size-hero700: 28px;
  --font-size-hero800: 32px;
  --font-size-hero900: 40px;
  --font-size-hero1000: 68px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --line-height-xs: 1;
  --line-height-sm: 1.25;
  --line-height-md: 1.5;
  --line-height-lg: 2;
  --spacing-none: 0px;
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-s-nudge: 6px;
  --spacing-sm: 8px;
  --spacing-m-nudge: 10px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-xxl: 24px;
  --spacing-xxxl: 32px;
  --timing-function-accelerate-max: cubic-bezier(0.9, 0.1, 1, 0.2);
  --timing-function-accelerate-mid: cubic-bezier(1, 0, 1, 1);
  --timing-function-accelerate-min: cubic-bezier(0.8, 0, 0.78, 1);
  --timing-function-decelerate-max: cubic-bezier(0.1, 0.9, 0.2, 1);
  --timing-function-decelerate-mid: cubic-bezier(0, 0, 0, 1);
  --timing-function-decelerate-min: cubic-bezier(0.33, 0, 0.1, 1);
  --timing-function-easy-ease-max: cubic-bezier(0.8, 0, 0.2, 1);
  --timing-function-easy-ease: cubic-bezier(0.33, 0, 0.67, 1);
  --timing-function-linear: cubic-bezier(0, 0, 1, 1);
}

/* Light theme styles */
.cui-light {
  --body-bg-color: var(--color-neutral-100);
  --body-fg-color: var(--color-neutral-14);
  --default-border-color: var(--color-neutral-88);
  --button-active-fg-color: var(--color-neutral-14);
  --button-active-border-color: var(--color-neutral-70);
  --button-disabled-bg-color: var(--color-neutral-94);
  --button-disabled-border-color: var(--color-neutral-88);
  --button-disabled-fg-color: var(--color-neutral-74);
  --button-focus-bg-color: var(--color-neutral-100);
  --button-focus-border-color: var(--color-neutral-82);
  --button-focus-fg-color: var(--color-neutral-14);
  --button-hover-bg-color: var(--color-neutral-96);
  --button-hover-border-color: var(--color-neutral-78);
  --button-hover-fg-color: var(--color-neutral-14);
  --form-control-invalid-border-color: var(--color-danger-tint-40);
  --neutral-foreground1: var(--color-neutral-14);
  --neutral-foreground1hover: var(--color-neutral-14);
  --neutral-foreground1pressed: var(--color-neutral-14);
  --neutral-foreground1selected: var(--color-neutral-14);
  --neutral-foreground2: var(--color-neutral-26);
  --neutral-foreground2hover: var(--color-neutral-14);
  --neutral-foreground2pressed: var(--color-neutral-14);
  --neutral-foreground2selected: var(--color-neutral-14);
  --neutral-foreground2brand-hover: var(--color-brand-80);
  --neutral-foreground2brand-pressed: var(--color-brand-70);
  --neutral-foreground2brand-selected: var(--color-brand-80);
  --neutral-foreground3: var(--color-neutral-38);
  --neutral-foreground3hover: var(--color-neutral-26);
  --neutral-foreground3pressed: var(--color-neutral-26);
  --neutral-foreground3selected: var(--color-neutral-26);
  --neutral-foreground3brand-hover: var(--color-brand-80);
  --neutral-foreground3brand-pressed: var(--color-brand-70);
  --neutral-foreground3brand-selected: var(--color-brand-80);
  --neutral-foreground4: var(--color-neutral-44);
  --neutral-foreground-disabled: var(--color-neutral-74);
  --brand-foreground-link: var(--color-brand-70);
  --brand-foreground-link-hover: var(--color-brand-60);
  --brand-foreground-link-pressed: var(--color-brand-40);
  --brand-foreground-link-selected: var(--color-brand-70);
  --neutral-foreground2link: var(--color-neutral-26);
  --neutral-foreground2link-hover: var(--color-neutral-14);
  --neutral-foreground2link-pressed: var(--color-neutral-14);
  --neutral-foreground2link-selected: var(--color-neutral-14);
  --compound-brand-foreground1: var(--color-brand-80);
  --compound-brand-foreground1hover: var(--color-brand-70);
  --compound-brand-foreground1pressed: var(--color-brand-60);
  --brand-foreground1: var(--color-brand-80);
  --brand-foreground2: var(--color-brand-70);
  --brand-foreground2hover: var(--color-brand-60);
  --brand-foreground2pressed: var(--color-brand-30);
  --neutral-foreground1static: var(--color-neutral-14);
  --neutral-foreground-static-inverted: var(--color-neutral-100);
  --neutral-foreground-inverted: var(--color-neutral-100);
  --neutral-foreground-inverted-hover: var(--color-neutral-100);
  --neutral-foreground-inverted-pressed: var(--color-neutral-100);
  --neutral-foreground-inverted-selected: var(--color-neutral-100);
  --neutral-foreground-inverted2: var(--color-neutral-100);
  --neutral-foreground-on-brand: var(--color-neutral-100);
  --neutral-foreground-inverted-link: var(--color-neutral-100);
  --neutral-foreground-inverted-link-hover: var(--color-neutral-100);
  --neutral-foreground-inverted-link-pressed: var(--color-neutral-100);
  --neutral-foreground-inverted-link-selected: var(--color-neutral-100);
  --brand-foreground-inverted: var(--color-brand-100);
  --brand-foreground-inverted-hover: var(--color-brand-110);
  --brand-foreground-inverted-pressed: var(--color-brand-100);
  --brand-foreground-on-light: var(--color-brand-80);
  --brand-foreground-on-light-hover: var(--color-brand-70);
  --brand-foreground-on-light-pressed: var(--color-brand-50);
  --brand-foreground-on-light-selected: var(--color-brand-60);
  --neutral-background1: var(--color-neutral-100);
  --neutral-background1hover: var(--color-neutral-96);
  --neutral-background1pressed: var(--color-neutral-88);
  --neutral-background1selected: var(--color-neutral-92);
  --neutral-background2: var(--color-neutral-98);
  --neutral-background2hover: var(--color-neutral-94);
  --neutral-background2pressed: var(--color-neutral-86);
  --neutral-background2selected: var(--color-neutral-90);
  --neutral-background3: var(--color-neutral-96);
  --neutral-background3hover: var(--color-neutral-92);
  --neutral-background3pressed: var(--color-neutral-84);
  --neutral-background3selected: var(--color-neutral-88);
  --neutral-background4: var(--color-neutral-94);
  --neutral-background4hover: var(--color-neutral-98);
  --neutral-background4pressed: var(--color-neutral-96);
  --neutral-background4selected: var(--color-neutral-100);
  --neutral-background5: var(--color-neutral-92);
  --neutral-background5hover: var(--color-neutral-96);
  --neutral-background5pressed: var(--color-neutral-94);
  --neutral-background5selected: var(--color-neutral-98);
  --neutral-background6: var(--color-neutral-90);
  --neutral-background-inverted: var(--color-neutral-16);
  --neutral-background-static: var(--color-neutral-20);
  --subtle-background-hover: var(--color-neutral-96);
  --subtle-background-pressed: var(--color-neutral-88);
  --subtle-background-selected: var(--color-neutral-92);
  --neutral-background-disabled: var(--color-neutral-94);
  --neutral-stencil1: var(--color-neutral-90);
  --neutral-stencil2: var(--color-neutral-98);
  --brand-background: var(--color-brand-80);
  --brand-background-hover: var(--color-brand-70);
  --brand-background-pressed: var(--color-brand-40);
  --brand-background-selected: var(--color-brand-60);
  --compound-brand-background: var(--color-brand-80);
  --compound-brand-background-hover: var(--color-brand-70);
  --compound-brand-background-pressed: var(--color-brand-60);
  --brand-background-static: var(--color-brand-80);
  --brand-background2: var(--color-brand-160);
  --brand-background2hover: var(--color-brand-150);
  --brand-background2pressed: var(--color-brand-130);
  --brand-background-inverted: white;
  --brand-background-inverted-hover: var(--color-brand-160);
  --brand-background-inverted-pressed: var(--color-brand-140);
  --brand-background-inverted-selected: var(--color-brand-150);
  --neutral-stroke-accessible: var(--color-neutral-38);
  --neutral-stroke-accessible-hover: var(--color-neutral-34);
  --neutral-stroke-accessible-pressed: var(--color-neutral-30);
  --neutral-stroke-accessible-selected: var(--color-brand-80);
  --neutral-stroke1: var(--color-neutral-82);
  --neutral-stroke1hover: var(--color-neutral-78);
  --neutral-stroke1pressed: var(--color-neutral-70);
  --neutral-stroke1selected: var(--color-neutral-74);
  --neutral-stroke2: var(--color-neutral-88);
  --neutral-stroke3: var(--color-neutral-94);
  --neutral-stroke-subtle: var(--color-neutral-88);
  --neutral-stroke-on-brand: var(--color-neutral-100);
  --neutral-stroke-on-brand2: var(--color-neutral-100);
  --neutral-stroke-on-brand2hover: var(--color-neutral-100);
  --neutral-stroke-on-brand2pressed: var(--color-neutral-100);
  --neutral-stroke-on-brand2selected: var(--color-neutral-100);
  --brand-stroke1: var(--color-brand-80);
  --brand-stroke2: var(--color-brand-140);
  --brand-stroke2hover: var(--color-brand-120);
  --brand-stroke2pressed: var(--color-brand-80);
  --compound-brand-stroke: var(--color-brand-80);
  --compound-brand-stroke-hover: var(--color-brand-70);
  --compound-brand-stroke-pressed: var(--color-brand-60);
  --neutral-stroke-disabled: var(--color-neutral-88);
  --stroke-focus1: var(--color-neutral-100);
  --stroke-focus2: var(--color-neutral-0);
  --danger-background1: var(--color-danger-tint-10);
  --danger-foreground1: var(--color-danger-tint-10);
  --danger-background2: var(--color-danger-tint-60);
  --danger-foreground2: var(--color-danger-tint-50);
  --danger-background3: var(--color-danger-tint-60);
  --danger-foreground3: var(--color-danger-shade-10);
  --danger-border1: var(--color-danger-tint-40);
  --severe-background1: #d53404;
  --severe-background2: #fdf5f1;
  --severe-foreground1: #f2b7a1;
  --success-background1: var(--color-success-primary);
  --success-foreground1: var(--color-success-primary);
  --success-background2: var(--color-success-tint-60);
  --success-foreground2: var(--color-success-tint-50);
  --success-background3: var(--color-success-tint-60);
  --success-foreground3: var(--color-success-shade-10);
  --success-border1: var(--color-success-tint-40);
  --warning-background1: #fddf00;
  --warning-foreground1: #766900;
  --warning-background2: #fffef3;
  --warning-foreground2: #fef6a9;
  --warning-background3: #fdf6f3;
  --warning-foreground3: #da3b01;
  --warning-border1: #f4bfab;
  --shadow-0: none;
  --shadow-2: 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14);
  --shadow-4: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
  --shadow-8: 0 0 2px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.14);
  --shadow-16: 0 0 2px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.14);
  --shadow-28: 0 0 8px rgba(0, 0, 0, 0.12), 0 14px 28px rgba(0, 0, 0, 0.14);
  --shadow-64: 0 0 8px rgba(0, 0, 0, 0.12), 0 32px 64px rgba(0, 0, 0, 0.14);
  --drop-shadow-0: none;
  --drop-shadow-2: drop-shadow(0 0 2px rgba(0, 0, 0, 0.12))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.14));
  --drop-shadow-4: drop-shadow(0 0 2px rgba(0, 0, 0, 0.12))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.14));
  --drop-shadow-8: drop-shadow(0 0 2px rgba(0, 0, 0, 0.12))
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.14));
  --drop-shadow-16: drop-shadow(0 0 2px rgba(0, 0, 0, 0.12))
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.14));
  --drop-shadow-28: drop-shadow(0 0 8px rgba(0, 0, 0, 0.12))
    drop-shadow(0 14px 28px rgba(0, 0, 0, 0.14));
  --drop-shadow-64: drop-shadow(0 0 8px rgba(0, 0, 0, 0.12))
    drop-shadow(0 32px 64px rgba(0, 0, 0, 0.14));
}

/* Dark theme styles */
.cui-dark {
  --body-bg-color: var(--color-neutral-16);
  --body-fg-color: var(--color-neutral-100);
  --default-border-color: var(--color-neutral-32);
  --button-active-fg-color: var(--color-neutral-100);
  --button-active-border-color: var(--color-neutral-42);
  --button-disabled-bg-color: var(--color-neutral-8);
  --button-disabled-border-color: var(--color-neutral-26);
  --button-disabled-fg-color: var(--color-neutral-36);
  --button-focus-bg-color: var(--color-neutral-16);
  --button-focus-border-color: var(--color-neutral-40);
  --button-focus-fg-color: var(--color-neutral-100);
  --button-hover-bg-color: var(--color-neutral-24);
  --button-hover-border-color: var(--color-neutral-46);
  --button-hover-fg-color: var(--color-neutral-100);
  --form-control-invalid-border-color: var(--color-danger-tint-30);
  --neutral-foreground1: var(--color-neutral-100);
  --neutral-foreground1hover: var(--color-neutral-100);
  --neutral-foreground1pressed: var(--color-neutral-100);
  --neutral-foreground1selected: var(--color-neutral-100);
  --neutral-foreground2: var(--color-neutral-84);
  --neutral-foreground2hover: var(--color-neutral-100);
  --neutral-foreground2pressed: var(--color-neutral-100);
  --neutral-foreground2selected: var(--color-neutral-100);
  --neutral-foreground2brand-hover: var(--color-brand-100);
  --neutral-foreground2brand-pressed: var(--color-brand-90);
  --neutral-foreground2brand-selected: var(--color-brand-100);
  --neutral-foreground3: var(--color-neutral-68);
  --neutral-foreground3hover: var(--color-neutral-84);
  --neutral-foreground3pressed: var(--color-neutral-84);
  --neutral-foreground3selected: var(--color-neutral-84);
  --neutral-foreground3brand-hover: var(--color-brand-100);
  --neutral-foreground3brand-pressed: var(--color-brand-90);
  --neutral-foreground3brand-selected: var(--color-brand-100);
  --neutral-foreground4: var(--color-neutral-60);
  --neutral-foreground-disabled: var(--color-neutral-36);
  --brand-foreground-link: var(--color-brand-90);
  --brand-foreground-link-hover: var(--color-brand-110);
  --brand-foreground-link-pressed: var(--color-brand-90);
  --brand-foreground-link-selected: var(--color-brand-90);
  --neutral-foreground2link: var(--color-neutral-84);
  --neutral-foreground2link-hover: var(--color-neutral-100);
  --neutral-foreground2link-pressed: var(--color-neutral-100);
  --neutral-foreground2link-selected: var(--color-neutral-100);
  --compound-brand-foreground1: var(--color-brand-100);
  --compound-brand-foreground1hover: var(--color-brand-90);
  --compound-brand-foreground1pressed: var(--color-brand-110);
  --brand-foreground1: var(--color-brand-100);
  --brand-foreground2: var(--color-brand-90);
  --brand-foreground2hover: var(--color-brand-110);
  --brand-foreground2pressed: var(--color-brand-160);
  --neutral-foreground1static: var(--color-neutral-100);
  --neutral-foreground-static-inverted: var(--color-neutral-100);
  --neutral-foreground-inverted: var(--color-neutral-14);
  --neutral-foreground-inverted-hover: var(--color-neutral-14);
  --neutral-foreground-inverted-pressed: var(--color-neutral-14);
  --neutral-foreground-inverted-selected: var(--color-neutral-14);
  --neutral-foreground-inverted2: var(--color-neutral-14);
  --neutral-foreground-on-brand: var(--color-neutral-100);
  --neutral-foreground-inverted-link: var(--color-neutral-100);
  --neutral-foreground-inverted-link-hover: var(--color-neutral-100);
  --neutral-foreground-inverted-link-pressed: var(--color-neutral-100);
  --neutral-foreground-inverted-link-selected: var(--color-neutral-100);
  --brand-foreground-inverted: var(--color-brand-80);
  --brand-foreground-inverted-hover: var(--color-brand-70);
  --brand-foreground-inverted-pressed: var(--color-brand-60);
  --brand-foreground-on-light: var(--color-brand-100);
  --brand-foreground-on-light-hover: var(--color-brand-90);
  --brand-foreground-on-light-pressed: var(--color-brand-50);
  --brand-foreground-on-light-selected: var(--color-brand-110);
  --neutral-background1: var(--color-neutral-16);
  --neutral-background1hover: var(--color-neutral-24);
  --neutral-background1pressed: var(--color-neutral-12);
  --neutral-background1selected: var(--color-neutral-22);
  --neutral-background2: var(--color-neutral-12);
  --neutral-background2hover: var(--color-neutral-20);
  --neutral-background2pressed: var(--color-neutral-8);
  --neutral-background2selected: var(--color-neutral-18);
  --neutral-background3: var(--color-neutral-8);
  --neutral-background3hover: var(--color-neutral-22);
  --neutral-background3pressed: var(--color-neutral-4);
  --neutral-background3selected: var(--color-neutral-12);
  --neutral-background4: var(--color-neutral-4);
  --neutral-background4hover: var(--color-neutral-12);
  --neutral-background4pressed: var(--color-neutral-8);
  --neutral-background4selected: var(--color-neutral-10);
  --neutral-background5: var(--color-neutral-22);
  --neutral-background5hover: var(--color-neutral-8);
  --neutral-background5pressed: var(--color-neutral-4);
  --neutral-background5selected: var(--color-neutral-12);
  --neutral-background6: var(--color-neutral-18);
  --neutral-background-inverted: var(--color-neutral-100);
  --neutral-background-static: var(--color-neutral-24);
  --subtle-background-hover: var(--color-neutral-22);
  --subtle-background-pressed: var(--color-neutral-12);
  --subtle-background-selected: var(--color-neutral-22);
  --neutral-background-disabled: var(--color-neutral-4);
  --neutral-stencil1: var(--color-neutral-38);
  --neutral-stencil2: var(--color-neutral-24);
  --brand-background: var(--color-brand-70);
  --brand-background-hover: var(--color-brand-80);
  --brand-background-pressed: var(--color-brand-40);
  --brand-background-selected: var(--color-brand-60);
  --compound-brand-background: var(--color-brand-100);
  --compound-brand-background-hover: var(--color-brand-110);
  --compound-brand-background-pressed: var(--color-brand-90);
  --brand-background-static: var(--color-brand-80);
  --brand-background2: var(--color-brand-20);
  --brand-background2hover: var(--color-brand-40);
  --brand-background2pressed: var(--color-brand-10);
  --brand-background-inverted: white;
  --brand-background-inverted-hover: var(--color-brand-160);
  --brand-background-inverted-pressed: var(--color-brand-140);
  --brand-background-inverted-selected: var(--color-brand-150);
  --neutral-stroke-accessible: var(--color-neutral-68);
  --neutral-stroke-accessible-hover: var(--color-neutral-74);
  --neutral-stroke-accessible-pressed: var(--color-neutral-70);
  --neutral-stroke-accessible-selected: var(--color-brand-100);
  --neutral-stroke1: var(--color-neutral-40);
  --neutral-stroke1hover: var(--color-neutral-46);
  --neutral-stroke1pressed: var(--color-neutral-42);
  --neutral-stroke1selected: var(--color-neutral-36);
  --neutral-stroke2: var(--color-neutral-12);
  --neutral-stroke3: var(--color-neutral-4);
  --neutral-stroke-subtle: var(--color-neutral-12);
  --neutral-stroke-on-brand: var(--color-neutral-16);
  --neutral-stroke-on-brand2: var(--color-neutral-100);
  --neutral-stroke-on-brand2hover: var(--color-neutral-100);
  --neutral-stroke-on-brand2pressed: var(--color-neutral-100);
  --neutral-stroke-on-brand2selected: var(--color-neutral-100);
  --brand-stroke1: var(--color-brand-100);
  --brand-stroke2: var(--color-brand-50);
  --brand-stroke2hover: var(--color-brand-50);
  --brand-stroke2pressed: var(--color-brand-100);
  --compound-brand-stroke: var(--color-brand-100);
  --compound-brand-stroke-hover: var(--color-brand-90);
  --compound-brand-stroke-pressed: var(--color-brand-110);
  --neutral-stroke-disabled: var(--color-neutral-26);
  --stroke-focus1: var(--color-neutral-0);
  --stroke-focus2: var(--color-neutral-100);
  --danger-background1: var(--color-danger-tint-10);
  --danger-foreground1: var(--color-danger-tint-10);
  --danger-background2: var(--color-danger-tint-60);
  --danger-foreground2: var(--color-danger-tint-50);
  --danger-background3: var(--color-danger-shade-40);
  --danger-foreground3: var(--color-danger-tint-40);
  --danger-border1: var(--color-danger-primary);
  --severe-background1: #d53404;
  --severe-background2: #fdf5f1;
  --severe-foreground1: #f2b7a1;
  --success-background1: var(--color-success-primary);
  --success-foreground1: var(--color-success-primary);
  --success-background2: var(--color-success-tint-60);
  --success-foreground2: var(--color-success-tint-50);
  --success-background3: var(--color-success-shade-40);
  --success-foreground3: var(--color-success-tint-30);
  --success-border1: var(--color-success-primary);
  --warning-background1: #fddf00;
  --warning-foreground1: #766900;
  --warning-background2: #fffef3;
  --warning-foreground2: #fef6a9;
  --warning-background3: #411200;
  --warning-foreground3: #e9835e;
  --warning-border1: #da3b01;
  --shadow-0: none;
  --shadow-2: 0 0 2px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-4: 0 0 2px rgba(0, 0, 0, 0.24), 0 2px 4px rgba(0, 0, 0, 0.28);
  --shadow-8: 0 0 2px rgba(0, 0, 0, 0.24), 0 4px 8px rgba(0, 0, 0, 0.28);
  --shadow-16: 0 0 2px rgba(0, 0, 0, 0.24), 0 8px 16px rgba(0, 0, 0, 0.28);
  --shadow-28: 0 0 8px rgba(0, 0, 0, 0.24), 0 14px 28px rgba(0, 0, 0, 0.28);
  --shadow-64: 0 0 8px rgba(0, 0, 0, 0.24), 0 32px 64px rgba(0, 0, 0, 0.28);
  --drop-shadow-0: none;
  --drop-shadow-2: drop-shadow(0 0 2px rgba(0, 0, 0, 0.24))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28));
  --drop-shadow-4: drop-shadow(0 0 2px rgba(0, 0, 0, 0.24))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.28));
  --drop-shadow-8: drop-shadow(0 0 2px rgba(0, 0, 0, 0.24))
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.28));
  --drop-shadow-16: drop-shadow(0 0 2px rgba(0, 0, 0, 0.24))
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.28));
  --drop-shadow-28: drop-shadow(0 0 8px rgba(0, 0, 0, 0.24))
    drop-shadow(0 14px 28px rgba(0, 0, 0, 0.28));
  --drop-shadow-64: drop-shadow(0 0 8px rgba(0, 0, 0, 0.24))
    drop-shadow(0 32px 64px rgba(0, 0, 0, 0.28));
}