:root {
  /* Layout */
  --epic-semantic-layout-page: var(--epic-color-white);
  --epic-semantic-layout-page-light: var(--epic-color-white);
  --epic-semantic-layout-page-ui: var(--epic-color-white-ui);
  --epic-semantic-layout-page-light-ui: var(--epic-color-white-ui);
  --epic-semantic-layout-user: var(--epic-color-white-background-lv1);
  --epic-semantic-layout-user-secondary: var(--epic-color-white-background-lv1);
  --epic-semantic-layout-system: var(--epic-color-white-background-lv2);
  --epic-semantic-layout-system-indigo: var(--epic-color-system-indigo);
  --epic-semantic-layout-system-dark: var(--epic-color-white-background-lv2);
  --epic-semantic-layout-system-dark-strong: var(--epic-color-white-background-lv4);
  --epic-semantic-layout-content: var(--epic-color-white);
  --epic-semantic-layout-content-glass: color-mix(in srgb, var(--epic-color-white) 95%, transparent);
  --epic-semantic-layout-side-option: color-mix(in srgb, var(--epic-color-gray-950) 7%, transparent);
  --epic-semantic-layout-side-option-shadow: color-mix(in srgb, var(--epic-color-gray-950) 10%, transparent);
  --epic-semantic-layout-border: var(--epic-color-gray-300);
  --epic-semantic-layout-border-light: var(--epic-color-gray-100);
  --epic-semantic-layout-gray-box: color-mix(in srgb, var(--epic-color-gray-500) 5%, transparent);

  /* Text */
  --epic-semantic-text-title: var(--epic-color-gray-950);
  --epic-semantic-text-body: var(--epic-color-gray-900);
  --epic-semantic-text-white: var(--epic-color-white);
  --epic-semantic-text-black: var(--epic-color-gray-950);
  --epic-semantic-text-black-button: var(--epic-color-gray-950);
  --epic-semantic-text-disabled: var(--epic-color-gray-400);
  --epic-semantic-text-caption: var(--epic-color-gray-700);
  --epic-semantic-text-caption-light: var(--epic-color-gray-600);
  --epic-semantic-text-caption-light-icon: var(--epic-color-gray-100);

  /* Input */
  --epic-semantic-input-text: var(--epic-color-gray-600);
  --epic-semantic-input-text-hover: var(--epic-color-gray-900);
  --epic-semantic-input-text-disabled: var(--epic-color-gray-400);
  --epic-semantic-input-text-disabled-user: var(--epic-color-gray-300);
  --epic-semantic-input-label-disabled: var(--epic-color-gray-600);
  --epic-semantic-input-base-text-disabled: color-mix(in srgb, var(--epic-color-gray-500) 70%, transparent);
  --epic-semantic-input-line-icon-hover: var(--epic-color-brand-500);
  --epic-semantic-input-icon: var(--epic-color-gray-300);
  --epic-semantic-input-icon-disabled: var(--epic-color-gray-300);
  --epic-semantic-input-line: var(--epic-color-gray-500);
  --epic-semantic-input-underline: var(--epic-color-gray-750);
  --epic-semantic-input-line-disabled: var(--epic-color-gray-400);
  --epic-semantic-input-ok: var(--epic-color-green-600);
  --epic-semantic-input-error: var(--epic-color-red-500);
  --epic-semantic-input-disabled: color-mix(in srgb, var(--epic-color-gray-500) 15%, transparent);
  --epic-semantic-input-base: var(--epic-color-white);
  --epic-semantic-input-base-light: color-mix(in srgb, var(--epic-color-white) 95%, transparent);
  --epic-semantic-input-base-light-disabled: color-mix(in srgb, var(--epic-color-gray-500) 10%, transparent);
  --epic-semantic-input-base-dark: color-mix(in srgb, var(--epic-color-gray-500) 15%, transparent);
  --epic-semantic-input-base-dark-disabled: color-mix(in srgb, var(--epic-color-gray-500) 20%, transparent);

  /* Button */
  --epic-semantic-button-outline-line: var(--epic-color-gray-400);
  --epic-semantic-button-outline-background: var(--epic-color-white);

  /* Shadow */
  --epic-semantic-shadow-lv0: transparent;
  --epic-semantic-shadow-lv1: color-mix(in srgb, var(--epic-color-gray-950) 3%, transparent);
  --epic-semantic-shadow-lv2: color-mix(in srgb, var(--epic-color-gray-950) 5%, transparent);
  --epic-semantic-shadow-lv3: color-mix(in srgb, var(--epic-color-gray-950) 7%, transparent);
  --epic-semantic-shadow-lv4: color-mix(in srgb, var(--epic-color-gray-950) 10%, transparent);

  /* Sidebar */
  --epic-semantic-sidebar-tree-line: var(--epic-color-gray-400);
  --epic-semantic-sidebar-tree-line-dark: var(--epic-color-gray-400);
  --epic-semantic-sidebar-tree-line-system: var(--epic-color-brand-300);
  --epic-semantic-sidebar-tooltip-background: var(--epic-color-white);
  --epic-semantic-sidebar-tab-background-disabled: var(--epic-color-white-background-lv3);
  --epic-semantic-sidebar-tab-background-disabled-hover: var(--epic-color-white-background-lv4);
  --epic-semantic-sidebar-tab-background: var(--epic-color-white);
  --epic-semantic-sidebar-layer-popup: color-mix(in srgb, var(--epic-color-gray-950) 50%, transparent);

  /* Card */
  --epic-semantic-card-top-01: color-mix(in srgb, var(--epic-color-white) 95%, transparent);
  --epic-semantic-card-bottom-02: color-mix(in srgb, var(--epic-color-white) 75%, transparent);
  --epic-semantic-card-content-text-overlay: color-mix(in srgb, var(--epic-color-gray-500) 10%, transparent);
  --epic-semantic-card-content-hover-emphasis-top: color-mix(in srgb, var(--epic-color-gray-500) 10%, transparent);
  --epic-semantic-card-content-hover-emphasis-bottom: color-mix(in srgb, var(--epic-color-gray-500) 3%, transparent);

  /* Menu bar */
  --epic-semantic-menubar-top-01: color-mix(in srgb, var(--epic-color-white) 95%, transparent);
  --epic-semantic-menubar-bottom-02: color-mix(in srgb, var(--epic-color-white) 75%, transparent);
  --epic-semantic-menubar-system-hover: color-mix(in srgb, var(--epic-color-white) 75%, transparent);
  --epic-semantic-menubar-desktop-menu-line: var(--epic-color-brand-200);
  --epic-semantic-menubar-content-glass-top: color-mix(in srgb, var(--epic-color-white) 45%, transparent);
  --epic-semantic-menubar-content-glass-bottom: color-mix(in srgb, var(--epic-color-white) 30%, transparent);

  /* Paging */
  --epic-semantic-paging-grid-background: color-mix(in srgb, var(--epic-color-brand-500) 5%, transparent);
  --epic-semantic-paging-grid-gray-background: color-mix(in srgb, var(--epic-color-gray-500) 25%, transparent);
  --epic-semantic-paging-grid-line: color-mix(in srgb, var(--epic-color-gray-500) 40%, transparent);
  --epic-semantic-paging-grid-input-background: color-mix(in srgb, var(--epic-color-white) 80%, transparent);
  --epic-semantic-paging-icon-background: color-mix(in srgb, var(--epic-color-gray-500) 20%, transparent);

  /* Table */
  --epic-semantic-table-accent-text: var(--epic-color-brand-500);
  --epic-semantic-table-header-background: color-mix(in srgb, var(--epic-color-brand-500) 5%, transparent);
  --epic-semantic-table-header-background-hover: color-mix(in srgb, var(--epic-color-brand-500) 7%, transparent);
  --epic-semantic-table-header-background-indigo: color-mix(in srgb, var(--epic-color-indigo-500) 5%, transparent);
  --epic-semantic-table-header-background-hover-indigo: color-mix(in srgb, var(--epic-color-indigo-500) 7%, transparent);
  --epic-semantic-table-header-gray-flat-background: color-mix(in srgb, var(--epic-color-gray-500) 10%, transparent);
  --epic-semantic-table-header-gray-glass-background: color-mix(in srgb, var(--epic-color-gray-500) 15%, transparent);
  --epic-semantic-table-list-gray-background: color-mix(in srgb, var(--epic-color-gray-500) 10%, transparent);
  --epic-semantic-table-hover-background: color-mix(in srgb, var(--epic-color-brand-500) 2%, transparent);
  --epic-semantic-table-hover-strong-background: color-mix(in srgb, var(--epic-color-brand-500) 5%, transparent);
  --epic-semantic-table-hover-strong-background-indigo: color-mix(in srgb, var(--epic-color-indigo-500) 5%, transparent);
  --epic-semantic-table-hover-background-indigo: color-mix(in srgb, var(--epic-color-indigo-500) 3%, transparent);
  --epic-semantic-table-line: var(--epic-color-gray-500);
  --epic-semantic-table-all-line: var(--epic-color-gray-300);
  --epic-semantic-table-icon: var(--epic-color-gray-500);
  --epic-semantic-table-header-column-line: var(--epic-color-brand-300);
  --epic-semantic-table-header-column-line-indigo: var(--epic-color-indigo-300);
  --epic-semantic-table-column-line: var(--epic-color-gray-400);
  --epic-semantic-table-hover-input-background: color-mix(in srgb, var(--epic-color-white) 85%, transparent);
  --epic-semantic-table-list-shadow-top: color-mix(in srgb, var(--epic-color-brand-500) 25%, transparent);
  --epic-semantic-table-list-shadow-bottom: transparent;
  --epic-semantic-table-list-shadow-top-indigo: color-mix(in srgb, var(--epic-color-indigo-500) 25%, transparent);
  --epic-semantic-table-list-shadow-bottom-indigo: transparent;
  --epic-semantic-table-list-gray-shadow-top: color-mix(in srgb, var(--epic-color-gray-500) 25%, transparent);
  --epic-semantic-table-list-gray-shadow-bottom: transparent;

  /* Menu card gradient */
  --epic-semantic-menu-card-gradient-top: transparent;
  --epic-semantic-menu-card-gradient-bottom: color-mix(in srgb, var(--epic-color-gray-500) 40%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root {
    --epic-semantic-layout-page: var(--epic-color-gray-950);
    --epic-semantic-layout-page-light: var(--epic-color-gray-900);
    --epic-semantic-layout-page-ui: var(--epic-color-gray-950);
    --epic-semantic-layout-page-light-ui: var(--epic-color-gray-900);
    --epic-semantic-layout-user: var(--epic-color-gray-950);
    --epic-semantic-layout-user-secondary: var(--epic-color-gray-950);
    --epic-semantic-layout-system: var(--epic-color-gray-900);
    --epic-semantic-layout-system-indigo: var(--epic-color-gray-900);
    --epic-semantic-layout-system-dark: var(--epic-color-gray-950);
    --epic-semantic-layout-system-dark-strong: var(--epic-color-gray-950);
    --epic-semantic-layout-content: var(--epic-color-gray-850);
    --epic-semantic-layout-content-glass: color-mix(in srgb, var(--epic-color-content-glass-dark) 80%, transparent);
    --epic-semantic-layout-side-option: color-mix(in srgb, var(--epic-color-gray-800) 30%, transparent);
    --epic-semantic-layout-side-option-shadow: color-mix(in srgb, var(--epic-color-gray-950) 55%, transparent);
    --epic-semantic-layout-border: var(--epic-color-gray-700);
    --epic-semantic-layout-border-light: var(--epic-color-gray-700);
    --epic-semantic-layout-gray-box: color-mix(in srgb, var(--epic-color-gray-950) 40%, transparent);

    --epic-semantic-text-title: var(--epic-color-gray-25);
    --epic-semantic-text-body: var(--epic-color-gray-50);
    --epic-semantic-text-white: var(--epic-color-white);
    --epic-semantic-text-black: var(--epic-color-gray-950);
    --epic-semantic-text-black-button: var(--epic-color-gray-950);
    --epic-semantic-text-disabled: var(--epic-color-gray-700);
    --epic-semantic-text-caption: var(--epic-color-gray-400);
    --epic-semantic-text-caption-light: var(--epic-color-gray-400);
    --epic-semantic-text-caption-light-icon: var(--epic-color-gray-500);

    --epic-semantic-input-text: var(--epic-color-gray-500);
    --epic-semantic-input-text-hover: var(--epic-color-gray-50);
    --epic-semantic-input-text-disabled: color-mix(in srgb, var(--epic-color-white) 15%, transparent);
    --epic-semantic-input-text-disabled-user: color-mix(in srgb, var(--epic-color-white) 15%, transparent);
    --epic-semantic-input-label-disabled: var(--epic-color-gray-700);
    --epic-semantic-input-base-text-disabled: color-mix(in srgb, var(--epic-color-white) 20%, transparent);
    --epic-semantic-input-line-icon-hover: var(--epic-color-brand-500);
    --epic-semantic-input-icon: var(--epic-color-gray-700);
    --epic-semantic-input-icon-disabled: var(--epic-color-gray-800);
    --epic-semantic-input-line: var(--epic-color-gray-700);
    --epic-semantic-input-underline: var(--epic-color-gray-600);
    --epic-semantic-input-line-disabled: color-mix(in srgb, var(--epic-color-white) 10%, transparent);
    --epic-semantic-input-ok: var(--epic-color-green-500);
    --epic-semantic-input-error: var(--epic-color-red-500);
    --epic-semantic-input-disabled: color-mix(in srgb, var(--epic-color-white) 10%, transparent);
    --epic-semantic-input-base: color-mix(in srgb, var(--epic-color-white) 7%, transparent);
    --epic-semantic-input-base-light: color-mix(in srgb, var(--epic-color-white) 5%, transparent);
    --epic-semantic-input-base-light-disabled: color-mix(in srgb, var(--epic-color-white) 3%, transparent);
    --epic-semantic-input-base-dark: color-mix(in srgb, var(--epic-color-white) 10%, transparent);
    --epic-semantic-input-base-dark-disabled: color-mix(in srgb, var(--epic-color-white) 5%, transparent);

    --epic-semantic-button-outline-line: color-mix(in srgb, var(--epic-color-gray-500) 40%, transparent);
    --epic-semantic-button-outline-background: var(--epic-color-gray-900);

    --epic-semantic-shadow-lv0: transparent;
    --epic-semantic-shadow-lv1: color-mix(in srgb, var(--epic-color-black) 7%, transparent);
    --epic-semantic-shadow-lv2: color-mix(in srgb, var(--epic-color-black) 15%, transparent);
    --epic-semantic-shadow-lv3: color-mix(in srgb, var(--epic-color-black) 20%, transparent);
    --epic-semantic-shadow-lv4: color-mix(in srgb, var(--epic-color-black) 35%, transparent);

    --epic-semantic-sidebar-tree-line: var(--epic-color-gray-750);
    --epic-semantic-sidebar-tree-line-dark: var(--epic-color-gray-600);
    --epic-semantic-sidebar-tree-line-system: var(--epic-color-brand-500);
    --epic-semantic-sidebar-tooltip-background: var(--epic-color-gray-950);
    --epic-semantic-sidebar-tab-background-disabled: var(--epic-color-gray-875);
    --epic-semantic-sidebar-tab-background-disabled-hover: var(--epic-color-gray-825);
    --epic-semantic-sidebar-tab-background: var(--epic-color-gray-925);
    --epic-semantic-sidebar-layer-popup: color-mix(in srgb, var(--epic-color-gray-950) 85%, transparent);

    --epic-semantic-card-top-01: color-mix(in srgb, var(--epic-color-gray-50) 15%, transparent);
    --epic-semantic-card-bottom-02: color-mix(in srgb, var(--epic-color-gray-50) 7%, transparent);
    --epic-semantic-card-content-text-overlay: color-mix(in srgb, var(--epic-color-white) 15%, transparent);
    --epic-semantic-card-content-hover-emphasis-top: color-mix(in srgb, var(--epic-color-gray-500) 40%, transparent);
    --epic-semantic-card-content-hover-emphasis-bottom: color-mix(in srgb, var(--epic-color-gray-500) 20%, transparent);

    --epic-semantic-menubar-top-01: color-mix(in srgb, var(--epic-color-gray-800) 95%, transparent);
    --epic-semantic-menubar-bottom-02: color-mix(in srgb, var(--epic-color-gray-800) 75%, transparent);
    --epic-semantic-menubar-system-hover: color-mix(in srgb, var(--epic-color-gray-800) 75%, transparent);
    --epic-semantic-menubar-desktop-menu-line: var(--epic-color-brand-600);
    --epic-semantic-menubar-content-glass-top: color-mix(in srgb, var(--epic-color-gray-50) 15%, transparent);
    --epic-semantic-menubar-content-glass-bottom: color-mix(in srgb, var(--epic-color-gray-50) 7%, transparent);

    --epic-semantic-paging-grid-background: color-mix(in srgb, var(--epic-color-brand-500) 20%, transparent);
    --epic-semantic-paging-grid-gray-background: color-mix(in srgb, var(--epic-color-gray-950) 25%, transparent);
    --epic-semantic-paging-grid-line: color-mix(in srgb, var(--epic-color-white) 7%, transparent);
    --epic-semantic-paging-grid-input-background: color-mix(in srgb, var(--epic-color-white) 10%, transparent);
    --epic-semantic-paging-icon-background: color-mix(in srgb, var(--epic-color-white) 15%, transparent);

    --epic-semantic-table-accent-text: var(--epic-color-brand-200);
    --epic-semantic-table-header-background: color-mix(in srgb, var(--epic-color-brand-500) 25%, transparent);
    --epic-semantic-table-header-background-hover: color-mix(in srgb, var(--epic-color-brand-500) 30%, transparent);
    --epic-semantic-table-header-background-indigo: color-mix(in srgb, var(--epic-color-indigo-500) 25%, transparent);
    --epic-semantic-table-header-background-hover-indigo: color-mix(in srgb, var(--epic-color-indigo-500) 30%, transparent);
    --epic-semantic-table-header-gray-flat-background: color-mix(in srgb, var(--epic-color-gray-500) 10%, transparent);
    --epic-semantic-table-header-gray-glass-background: color-mix(in srgb, var(--epic-color-gray-500) 20%, transparent);
    --epic-semantic-table-list-gray-background: color-mix(in srgb, var(--epic-color-gray-500) 10%, transparent);
    --epic-semantic-table-hover-background: color-mix(in srgb, var(--epic-color-brand-500) 5%, transparent);
    --epic-semantic-table-hover-strong-background: color-mix(in srgb, var(--epic-color-brand-500) 7%, transparent);
    --epic-semantic-table-hover-strong-background-indigo: color-mix(in srgb, var(--epic-color-indigo-500) 7%, transparent);
    --epic-semantic-table-hover-background-indigo: color-mix(in srgb, var(--epic-color-indigo-500) 5%, transparent);
    --epic-semantic-table-line: color-mix(in srgb, var(--epic-color-white) 35%, transparent);
    --epic-semantic-table-all-line: color-mix(in srgb, var(--epic-color-white) 25%, transparent);
    --epic-semantic-table-icon: color-mix(in srgb, var(--epic-color-white) 45%, transparent);
    --epic-semantic-table-header-column-line: var(--epic-color-brand-400);
    --epic-semantic-table-header-column-line-indigo: var(--epic-color-indigo-400);
    --epic-semantic-table-column-line: color-mix(in srgb, var(--epic-color-white) 25%, transparent);
    --epic-semantic-table-hover-input-background: color-mix(in srgb, var(--epic-color-white) 5%, transparent);
    --epic-semantic-table-list-shadow-top: color-mix(in srgb, var(--epic-color-brand-500) 25%, transparent);
    --epic-semantic-table-list-shadow-bottom: transparent;
    --epic-semantic-table-list-shadow-top-indigo: color-mix(in srgb, var(--epic-color-indigo-500) 25%, transparent);
    --epic-semantic-table-list-shadow-bottom-indigo: transparent;
    --epic-semantic-table-list-gray-shadow-top: color-mix(in srgb, var(--epic-color-gray-950) 45%, transparent);
    --epic-semantic-table-list-gray-shadow-bottom: transparent;

    --epic-semantic-menu-card-gradient-top: transparent;
    --epic-semantic-menu-card-gradient-bottom: color-mix(in srgb, var(--epic-color-gray-50) 25%, transparent);
  }
}

.semtle-light {
  --epic-semantic-layout-page: var(--epic-color-white);
  --epic-semantic-layout-page-light: var(--epic-color-white);
  --epic-semantic-layout-page-ui: var(--epic-color-white-ui);
  --epic-semantic-layout-page-light-ui: var(--epic-color-white-ui);
  --epic-semantic-layout-user: var(--epic-color-white-background-lv1);
  --epic-semantic-layout-user-secondary: var(--epic-color-white-background-lv1);
  --epic-semantic-layout-system: var(--epic-color-white-background-lv2);
  --epic-semantic-layout-system-indigo: var(--epic-color-system-indigo);
  --epic-semantic-layout-system-dark: var(--epic-color-white-background-lv2);
  --epic-semantic-layout-system-dark-strong: var(--epic-color-white-background-lv4);
  --epic-semantic-layout-content: var(--epic-color-white);
  --epic-semantic-layout-content-glass: color-mix(in srgb, var(--epic-color-white) 95%, transparent);
  --epic-semantic-layout-side-option: color-mix(in srgb, var(--epic-color-gray-950) 7%, transparent);
  --epic-semantic-layout-side-option-shadow: color-mix(in srgb, var(--epic-color-gray-950) 10%, transparent);
  --epic-semantic-layout-border: var(--epic-color-gray-300);
  --epic-semantic-layout-border-light: var(--epic-color-gray-100);
  --epic-semantic-layout-gray-box: color-mix(in srgb, var(--epic-color-gray-500) 5%, transparent);

  --epic-semantic-text-title: var(--epic-color-gray-950);
  --epic-semantic-text-body: var(--epic-color-gray-900);
  --epic-semantic-text-white: var(--epic-color-white);
  --epic-semantic-text-black: var(--epic-color-gray-950);
  --epic-semantic-text-black-button: var(--epic-color-gray-950);
  --epic-semantic-text-disabled: var(--epic-color-gray-400);
  --epic-semantic-text-caption: var(--epic-color-gray-700);
  --epic-semantic-text-caption-light: var(--epic-color-gray-600);
  --epic-semantic-text-caption-light-icon: var(--epic-color-gray-100);

  --epic-semantic-input-text: var(--epic-color-gray-600);
  --epic-semantic-input-text-hover: var(--epic-color-gray-900);
  --epic-semantic-input-text-disabled: var(--epic-color-gray-400);
  --epic-semantic-input-text-disabled-user: var(--epic-color-gray-300);
  --epic-semantic-input-label-disabled: var(--epic-color-gray-600);
  --epic-semantic-input-base-text-disabled: color-mix(in srgb, var(--epic-color-gray-500) 70%, transparent);
  --epic-semantic-input-line-icon-hover: var(--epic-color-brand-500);
  --epic-semantic-input-icon: var(--epic-color-gray-300);
  --epic-semantic-input-icon-disabled: var(--epic-color-gray-300);
  --epic-semantic-input-line: var(--epic-color-gray-500);
  --epic-semantic-input-underline: var(--epic-color-gray-750);
  --epic-semantic-input-line-disabled: var(--epic-color-gray-400);
  --epic-semantic-input-ok: var(--epic-color-green-600);
  --epic-semantic-input-error: var(--epic-color-red-500);
  --epic-semantic-input-disabled: color-mix(in srgb, var(--epic-color-gray-500) 15%, transparent);
  --epic-semantic-input-base: var(--epic-color-white);
  --epic-semantic-input-base-light: color-mix(in srgb, var(--epic-color-white) 95%, transparent);
  --epic-semantic-input-base-light-disabled: color-mix(in srgb, var(--epic-color-gray-500) 10%, transparent);
  --epic-semantic-input-base-dark: color-mix(in srgb, var(--epic-color-gray-500) 15%, transparent);
  --epic-semantic-input-base-dark-disabled: color-mix(in srgb, var(--epic-color-gray-500) 20%, transparent);

  --epic-semantic-button-outline-line: var(--epic-color-gray-400);
  --epic-semantic-button-outline-background: var(--epic-color-white);

  --epic-semantic-shadow-lv0: transparent;
  --epic-semantic-shadow-lv1: color-mix(in srgb, var(--epic-color-gray-950) 3%, transparent);
  --epic-semantic-shadow-lv2: color-mix(in srgb, var(--epic-color-gray-950) 5%, transparent);
  --epic-semantic-shadow-lv3: color-mix(in srgb, var(--epic-color-gray-950) 7%, transparent);
  --epic-semantic-shadow-lv4: color-mix(in srgb, var(--epic-color-gray-950) 10%, transparent);

  --epic-semantic-sidebar-tree-line: var(--epic-color-gray-400);
  --epic-semantic-sidebar-tree-line-dark: var(--epic-color-gray-400);
  --epic-semantic-sidebar-tree-line-system: var(--epic-color-brand-300);
  --epic-semantic-sidebar-tooltip-background: var(--epic-color-white);
  --epic-semantic-sidebar-tab-background-disabled: var(--epic-color-white-background-lv3);
  --epic-semantic-sidebar-tab-background-disabled-hover: var(--epic-color-white-background-lv4);
  --epic-semantic-sidebar-tab-background: var(--epic-color-white);
  --epic-semantic-sidebar-layer-popup: color-mix(in srgb, var(--epic-color-gray-950) 50%, transparent);

  --epic-semantic-card-top-01: color-mix(in srgb, var(--epic-color-white) 95%, transparent);
  --epic-semantic-card-bottom-02: color-mix(in srgb, var(--epic-color-white) 75%, transparent);
  --epic-semantic-card-content-text-overlay: color-mix(in srgb, var(--epic-color-gray-500) 10%, transparent);
  --epic-semantic-card-content-hover-emphasis-top: color-mix(in srgb, var(--epic-color-gray-500) 10%, transparent);
  --epic-semantic-card-content-hover-emphasis-bottom: color-mix(in srgb, var(--epic-color-gray-500) 3%, transparent);

  --epic-semantic-menubar-top-01: color-mix(in srgb, var(--epic-color-white) 95%, transparent);
  --epic-semantic-menubar-bottom-02: color-mix(in srgb, var(--epic-color-white) 75%, transparent);
  --epic-semantic-menubar-system-hover: color-mix(in srgb, var(--epic-color-white) 75%, transparent);
  --epic-semantic-menubar-desktop-menu-line: var(--epic-color-brand-200);
  --epic-semantic-menubar-content-glass-top: color-mix(in srgb, var(--epic-color-white) 45%, transparent);
  --epic-semantic-menubar-content-glass-bottom: color-mix(in srgb, var(--epic-color-white) 30%, transparent);

  --epic-semantic-paging-grid-background: color-mix(in srgb, var(--epic-color-brand-500) 5%, transparent);
  --epic-semantic-paging-grid-gray-background: color-mix(in srgb, var(--epic-color-gray-500) 25%, transparent);
  --epic-semantic-paging-grid-line: color-mix(in srgb, var(--epic-color-gray-500) 40%, transparent);
  --epic-semantic-paging-grid-input-background: color-mix(in srgb, var(--epic-color-white) 80%, transparent);
  --epic-semantic-paging-icon-background: color-mix(in srgb, var(--epic-color-gray-500) 20%, transparent);

  --epic-semantic-table-accent-text: var(--epic-color-brand-500);
  --epic-semantic-table-header-background: color-mix(in srgb, var(--epic-color-brand-500) 5%, transparent);
  --epic-semantic-table-header-background-hover: color-mix(in srgb, var(--epic-color-brand-500) 7%, transparent);
  --epic-semantic-table-header-background-indigo: color-mix(in srgb, var(--epic-color-indigo-500) 5%, transparent);
  --epic-semantic-table-header-background-hover-indigo: color-mix(in srgb, var(--epic-color-indigo-500) 7%, transparent);
  --epic-semantic-table-header-gray-flat-background: color-mix(in srgb, var(--epic-color-gray-500) 10%, transparent);
  --epic-semantic-table-header-gray-glass-background: color-mix(in srgb, var(--epic-color-gray-500) 15%, transparent);
  --epic-semantic-table-list-gray-background: color-mix(in srgb, var(--epic-color-gray-500) 10%, transparent);
  --epic-semantic-table-hover-background: color-mix(in srgb, var(--epic-color-brand-500) 2%, transparent);
  --epic-semantic-table-hover-strong-background: color-mix(in srgb, var(--epic-color-brand-500) 5%, transparent);
  --epic-semantic-table-hover-strong-background-indigo: color-mix(in srgb, var(--epic-color-indigo-500) 5%, transparent);
  --epic-semantic-table-hover-background-indigo: color-mix(in srgb, var(--epic-color-indigo-500) 3%, transparent);
  --epic-semantic-table-line: var(--epic-color-gray-500);
  --epic-semantic-table-all-line: var(--epic-color-gray-300);
  --epic-semantic-table-icon: var(--epic-color-gray-500);
  --epic-semantic-table-header-column-line: var(--epic-color-brand-300);
  --epic-semantic-table-header-column-line-indigo: var(--epic-color-indigo-300);
  --epic-semantic-table-column-line: var(--epic-color-gray-400);
  --epic-semantic-table-hover-input-background: color-mix(in srgb, var(--epic-color-white) 85%, transparent);
  --epic-semantic-table-list-shadow-top: color-mix(in srgb, var(--epic-color-brand-500) 25%, transparent);
  --epic-semantic-table-list-shadow-bottom: transparent;
  --epic-semantic-table-list-shadow-top-indigo: color-mix(in srgb, var(--epic-color-indigo-500) 25%, transparent);
  --epic-semantic-table-list-shadow-bottom-indigo: transparent;
  --epic-semantic-table-list-gray-shadow-top: color-mix(in srgb, var(--epic-color-gray-500) 25%, transparent);
  --epic-semantic-table-list-gray-shadow-bottom: transparent;

  --epic-semantic-menu-card-gradient-top: transparent;
  --epic-semantic-menu-card-gradient-bottom: color-mix(in srgb, var(--epic-color-gray-500) 40%, transparent);
}

.semtle-dark {
  --epic-semantic-layout-page: var(--epic-color-gray-950);
  --epic-semantic-layout-page-light: var(--epic-color-gray-900);
  --epic-semantic-layout-page-ui: var(--epic-color-gray-950);
  --epic-semantic-layout-page-light-ui: var(--epic-color-gray-900);
  --epic-semantic-layout-user: var(--epic-color-gray-950);
  --epic-semantic-layout-user-secondary: var(--epic-color-gray-950);
  --epic-semantic-layout-system: var(--epic-color-gray-900);
  --epic-semantic-layout-system-indigo: var(--epic-color-gray-900);
  --epic-semantic-layout-system-dark: var(--epic-color-gray-950);
  --epic-semantic-layout-system-dark-strong: var(--epic-color-gray-950);
  --epic-semantic-layout-content: var(--epic-color-gray-850);
  --epic-semantic-layout-content-glass: color-mix(in srgb, var(--epic-color-content-glass-dark) 80%, transparent);
  --epic-semantic-layout-side-option: color-mix(in srgb, var(--epic-color-gray-800) 30%, transparent);
  --epic-semantic-layout-side-option-shadow: color-mix(in srgb, var(--epic-color-gray-950) 55%, transparent);
  --epic-semantic-layout-border: var(--epic-color-gray-700);
  --epic-semantic-layout-border-light: var(--epic-color-gray-700);
  --epic-semantic-layout-gray-box: color-mix(in srgb, var(--epic-color-gray-950) 40%, transparent);

  --epic-semantic-text-title: var(--epic-color-gray-25);
  --epic-semantic-text-body: var(--epic-color-gray-50);
  --epic-semantic-text-white: var(--epic-color-white);
  --epic-semantic-text-black: var(--epic-color-gray-950);
  --epic-semantic-text-black-button: var(--epic-color-gray-950);
  --epic-semantic-text-disabled: var(--epic-color-gray-700);
  --epic-semantic-text-caption: var(--epic-color-gray-400);
  --epic-semantic-text-caption-light: var(--epic-color-gray-400);
  --epic-semantic-text-caption-light-icon: var(--epic-color-gray-500);

  --epic-semantic-input-text: var(--epic-color-gray-500);
  --epic-semantic-input-text-hover: var(--epic-color-gray-50);
  --epic-semantic-input-text-disabled: color-mix(in srgb, var(--epic-color-white) 15%, transparent);
  --epic-semantic-input-text-disabled-user: color-mix(in srgb, var(--epic-color-white) 15%, transparent);
  --epic-semantic-input-label-disabled: var(--epic-color-gray-700);
  --epic-semantic-input-base-text-disabled: color-mix(in srgb, var(--epic-color-white) 20%, transparent);
  --epic-semantic-input-line-icon-hover: var(--epic-color-brand-500);
  --epic-semantic-input-icon: var(--epic-color-gray-700);
  --epic-semantic-input-icon-disabled: var(--epic-color-gray-800);
  --epic-semantic-input-line: var(--epic-color-gray-700);
  --epic-semantic-input-underline: var(--epic-color-gray-600);
  --epic-semantic-input-line-disabled: color-mix(in srgb, var(--epic-color-white) 10%, transparent);
  --epic-semantic-input-ok: var(--epic-color-green-500);
  --epic-semantic-input-error: var(--epic-color-red-500);
  --epic-semantic-input-disabled: color-mix(in srgb, var(--epic-color-white) 10%, transparent);
  --epic-semantic-input-base: color-mix(in srgb, var(--epic-color-white) 7%, transparent);
  --epic-semantic-input-base-light: color-mix(in srgb, var(--epic-color-white) 5%, transparent);
  --epic-semantic-input-base-light-disabled: color-mix(in srgb, var(--epic-color-white) 3%, transparent);
  --epic-semantic-input-base-dark: color-mix(in srgb, var(--epic-color-white) 10%, transparent);
  --epic-semantic-input-base-dark-disabled: color-mix(in srgb, var(--epic-color-white) 5%, transparent);

  --epic-semantic-button-outline-line: color-mix(in srgb, var(--epic-color-gray-500) 40%, transparent);
  --epic-semantic-button-outline-background: var(--epic-color-gray-900);

  --epic-semantic-shadow-lv0: transparent;
  --epic-semantic-shadow-lv1: color-mix(in srgb, var(--epic-color-black) 7%, transparent);
  --epic-semantic-shadow-lv2: color-mix(in srgb, var(--epic-color-black) 15%, transparent);
  --epic-semantic-shadow-lv3: color-mix(in srgb, var(--epic-color-black) 20%, transparent);
  --epic-semantic-shadow-lv4: color-mix(in srgb, var(--epic-color-black) 35%, transparent);

  --epic-semantic-sidebar-tree-line: var(--epic-color-gray-750);
  --epic-semantic-sidebar-tree-line-dark: var(--epic-color-gray-600);
  --epic-semantic-sidebar-tree-line-system: var(--epic-color-brand-500);
  --epic-semantic-sidebar-tooltip-background: var(--epic-color-gray-950);
  --epic-semantic-sidebar-tab-background-disabled: var(--epic-color-gray-875);
  --epic-semantic-sidebar-tab-background-disabled-hover: var(--epic-color-gray-825);
  --epic-semantic-sidebar-tab-background: var(--epic-color-gray-925);
  --epic-semantic-sidebar-layer-popup: color-mix(in srgb, var(--epic-color-gray-950) 85%, transparent);

  --epic-semantic-card-top-01: color-mix(in srgb, var(--epic-color-gray-50) 15%, transparent);
  --epic-semantic-card-bottom-02: color-mix(in srgb, var(--epic-color-gray-50) 7%, transparent);
  --epic-semantic-card-content-text-overlay: color-mix(in srgb, var(--epic-color-white) 15%, transparent);
  --epic-semantic-card-content-hover-emphasis-top: color-mix(in srgb, var(--epic-color-gray-500) 40%, transparent);
  --epic-semantic-card-content-hover-emphasis-bottom: color-mix(in srgb, var(--epic-color-gray-500) 20%, transparent);

  --epic-semantic-menubar-top-01: color-mix(in srgb, var(--epic-color-gray-800) 95%, transparent);
  --epic-semantic-menubar-bottom-02: color-mix(in srgb, var(--epic-color-gray-800) 75%, transparent);
  --epic-semantic-menubar-system-hover: color-mix(in srgb, var(--epic-color-gray-800) 75%, transparent);
  --epic-semantic-menubar-desktop-menu-line: var(--epic-color-brand-600);
  --epic-semantic-menubar-content-glass-top: color-mix(in srgb, var(--epic-color-gray-50) 15%, transparent);
  --epic-semantic-menubar-content-glass-bottom: color-mix(in srgb, var(--epic-color-gray-50) 7%, transparent);

  --epic-semantic-paging-grid-background: color-mix(in srgb, var(--epic-color-brand-500) 20%, transparent);
  --epic-semantic-paging-grid-gray-background: color-mix(in srgb, var(--epic-color-gray-950) 25%, transparent);
  --epic-semantic-paging-grid-line: color-mix(in srgb, var(--epic-color-white) 7%, transparent);
  --epic-semantic-paging-grid-input-background: color-mix(in srgb, var(--epic-color-white) 10%, transparent);
  --epic-semantic-paging-icon-background: color-mix(in srgb, var(--epic-color-white) 15%, transparent);

  --epic-semantic-table-accent-text: var(--epic-color-brand-200);
  --epic-semantic-table-header-background: color-mix(in srgb, var(--epic-color-brand-500) 25%, transparent);
  --epic-semantic-table-header-background-hover: color-mix(in srgb, var(--epic-color-brand-500) 30%, transparent);
  --epic-semantic-table-header-background-indigo: color-mix(in srgb, var(--epic-color-indigo-500) 25%, transparent);
  --epic-semantic-table-header-background-hover-indigo: color-mix(in srgb, var(--epic-color-indigo-500) 30%, transparent);
  --epic-semantic-table-header-gray-flat-background: color-mix(in srgb, var(--epic-color-gray-500) 10%, transparent);
  --epic-semantic-table-header-gray-glass-background: color-mix(in srgb, var(--epic-color-gray-500) 20%, transparent);
  --epic-semantic-table-list-gray-background: color-mix(in srgb, var(--epic-color-gray-500) 10%, transparent);
  --epic-semantic-table-hover-background: color-mix(in srgb, var(--epic-color-brand-500) 5%, transparent);
  --epic-semantic-table-hover-strong-background: color-mix(in srgb, var(--epic-color-brand-500) 7%, transparent);
  --epic-semantic-table-hover-strong-background-indigo: color-mix(in srgb, var(--epic-color-indigo-500) 7%, transparent);
  --epic-semantic-table-hover-background-indigo: color-mix(in srgb, var(--epic-color-indigo-500) 5%, transparent);
  --epic-semantic-table-line: color-mix(in srgb, var(--epic-color-white) 35%, transparent);
  --epic-semantic-table-all-line: color-mix(in srgb, var(--epic-color-white) 25%, transparent);
  --epic-semantic-table-icon: color-mix(in srgb, var(--epic-color-white) 45%, transparent);
  --epic-semantic-table-header-column-line: var(--epic-color-brand-400);
  --epic-semantic-table-header-column-line-indigo: var(--epic-color-indigo-400);
  --epic-semantic-table-column-line: color-mix(in srgb, var(--epic-color-white) 25%, transparent);
  --epic-semantic-table-hover-input-background: color-mix(in srgb, var(--epic-color-white) 5%, transparent);
  --epic-semantic-table-list-shadow-top: color-mix(in srgb, var(--epic-color-brand-500) 25%, transparent);
  --epic-semantic-table-list-shadow-bottom: transparent;
  --epic-semantic-table-list-shadow-top-indigo: color-mix(in srgb, var(--epic-color-indigo-500) 25%, transparent);
  --epic-semantic-table-list-shadow-bottom-indigo: transparent;
  --epic-semantic-table-list-gray-shadow-top: color-mix(in srgb, var(--epic-color-gray-950) 45%, transparent);
  --epic-semantic-table-list-gray-shadow-bottom: transparent;

  --epic-semantic-menu-card-gradient-top: transparent;
  --epic-semantic-menu-card-gradient-bottom: color-mix(in srgb, var(--epic-color-gray-50) 25%, transparent);
}