:root {
  /* Named Colors */
  --color-bg-default: var(--palette-white);
  --color-base-plane: #eceff2;
  --color-block-background: var(--palette-white);
  --color-block-background-translucent: rgb(255 255 255 / 30%);
  --color-block-border: var(--palette-white);
  --color-surface-background: var(--palette-indigo-grey-10);
  --color-surface-text: var(--palette-indigo-grey-100);
  --color-muted-text: var(--palette-indigo-grey-60);
  --color-borders-default: #e4e5e7;
  --color-label: var(--palette-indigo-grey-100);
  --color-gradient01: var(--palette-grey-10);
  --color-gradient02: var(--palette-indigo-grey-15);
  --color-gradient03: var(--palette-grey-20);
  --color-table-head: var(--palette-indigo-grey-20);
  --color-text-header: var(--palette-indigo-grey-100);
  --color-table-border: var(--palette-grey-20);
  --color-slider-track: var(--palette-indigo-grey-30);
  --color-slider-pin: var(--palette-indigo-grey-100);
  --color-button-border: var(--palette-indigo-grey-50);
  --user-card-accent: var(--palette-green);
  --color-accent: var(--palette-blue-50);
  --color-icon-active: var(--palette-blue-50);
  --color-icon-default: var(--palette-indigo-grey-70);
  --color-error: var(--palette-red-60);
  --color-neutral-500: #e1e5ec;
  --color-neutral-600: #c3c8d1;
  --color-neutral-700: #a1a6b2;
  --color-text-heading: #38393b;
  --color-text-subheading: var(--palette-indigo-grey-70);
  --color-text-body: #111827;
  --color-table-header: #e4f3f3;
  --color-table-header-text: #4b7e7e;
  --color-border-gray: #838b96;
  --color-text-placeholder: #a9acb1;
  --color-bg-default-gray: #f5f5f5;
  --color-hover-default: rgb(0 0 0 / 5%);

  /* Icons */
  --color-icon: var(--palette-indigo-grey-70);
  --color-icon-warning: var(--palette-red-60);

  /* Forms */
  --color-checkbox-outline: var(--palette-indigo-grey-30);

  /* Buttons */
  --color-button-icon: var(--palette-indigo-grey-100);
  --color-button-default-background: var(--palette-white);
  --color-button-default-background-hover:
    linear-gradient(
      to bottom,
      var(--color-hover-default) 0%,
      var(--color-hover-default) 100%
    ),
    var(--palette-white);
  --color-button-default-border-hover: var(--palette-indigo-grey-50);
  --color-button-default-border: var(--palette-indigo-grey-50);
  --color-button-default-foreground: var(--palette-black);
  --color-button-default-background-active:
    linear-gradient(to bottom, rgb(0 0 0 / 10%) 0%, rgb(0 0 0 / 10%) 100%),
    var(--palette-white);
  --color-button-primary-background: var(--palette-blue-50);
  --color-button-primary-background-hover:
    linear-gradient(to bottom, rgb(0 0 0 / 20%) 0%, rgb(0 0 0 / 20%) 100%),
    var(--palette-blue-50);
  --color-button-primary-border-hover: rgb(0 0 0 / 20%);
  --color-button-primary-border-focused: var(--palette-black);
  --color-button-primary-text: var(--palette-white);
  --color-button-primary-background-active:
    linear-gradient(to bottom, rgb(0 0 0 / 40%) 0%, rgb(0 0 0 / 40%) 100%),
    var(--palette-blue-50);
  --color-button-active-shadow: 0 0 0.25rem 0 var(--palette-grey-100);
  --color-button-highlighted-active-shadow: 0 0 0.1875rem 0
    var(--palette-grey-50);
  --color-button-navigation-background-selected: var(--palette-blue-10);

  /* Named Gradients */
  --gradient-magic: linear-gradient(
    to right,
    #60d4da 2.07%,
    #505ff1 38.01%,
    #a368f7 82.94%,
    #ff7156 100%
  );
  --gradient-magic-active:
    linear-gradient(to bottom, rgb(0 0 0 / 10%) 0%, rgb(0 0 0 / 10%) 100%),
    var(--gradient-magic);

  /* Menu */
  --color-menu-item-active-border: var(--palette-white);
  --menu-item-active-border-gradient-end: var(--palette-indigo-grey-20);
  --color-menu-item-group: var(--palette-indigo-grey-70);
  --color-menu-hr: var(--palette-indigo-grey-30);
  --menu-item-active-shadow: -1px 3px 5px 0 rgb(105 126 199 / 14%);
  --menu-item-active-collapsed-shadow: -1px 4px 4px 0 rgb(105 126 199 / 26%);

  /* Navigation */
  --color-navigation-progress-bar: var(--palette-red-20);
  --color-navigation-item-active: var(--palette-blue-40);
  --color-navigation-item-active-text: var(--palette-white);
  --color-navigation-item-arrow: #1f1f1f;

  /* Tabs */
  --shadow-tab-group:
    -1px 0 1px 0 var(--palette-white) inset,
    1px 1px 1px 0 var(--palette-indigo-grey-40) inset;
  --shadow-tab-active: 0 2px 2px 0 rgb(0 0 0 / 10%);
  --color-tab-active-background: var(--palette-white);
  --color-tab-active-text: var(--palette-indigo-grey-100);

  /* Tables */
  --color-table-text: var(--palette-black);
  --color-table-text-subordinate: var(--palette-grey-110);
  --color-table-column-border: var(--palette-indigo-grey-15);
  --table-shadow: 0 0.25rem 0.25rem 0 var(--palette-indigo-grey-30);
  --table-header-shadow: 0 0 0.25rem 0 var(--palette-indigo-grey-30);
  --table-group-shadow: 0 3px 6px 0 var(--palette-indigo-grey-30);
  --table-cell-shadow: 2px 3px 4px 0 var(--palette-indigo-grey-30);
  --table-header-gutter: linear-gradient(
    to left,
    transparent,
    var(--palette-indigo-grey-30)
  );
  --table-column-clicked-background: rgba(96, 212, 218, 0.06);
  --table-column-clicked-border: #60d4da;
  --table-header-current: var(--palette-indigo-grey-70);

  /* Buckets Header */
  --color-buckets-header-text: var(--palette-white);
  --color-buckets-header-background: var(--palette-indigo-grey-60);

  /* Cells */
  --cell-static-hover-background: var(--palette-grey-10);
  --cell-progress-bar-background: var(--palette-grey-10);
  --cell-editable-text: var(--palette-blue-50);
  --cell-editable-background: var(--palette-blue-10);
  --cell-editable-background-hover: color-mix(
    in srgb,
    var(--palette-blue-10) 95%,
    black 5%
  );
  --cell-editable-background-focus: var(--palette-white);
  --cell-editable-focus-border: 1px solid var(--palette-blue-50);
  --cell-editable-selection: var(--palette-blue-10);
  --color-message-error-bg: var(--palette-red-10);
  --color-message-error-border: var(--palette-red-60);
  --color-message-info-bg: var(--palette-blue-10);
  --color-message-info-border: var(--palette-blue-50);
  --color-message-success-bg: var(--palette-green-10);
  --color-message-success-border: var(--palette-green-50);

  /* Status Badge */
  --color-status-badge-text: var(--palette-white);
  --color-status-badge-confirmed: var(--color-green-40);
  --color-status-badge-draft: var(--palette-grey-40);
  --color-status-badge-planned: var(--palette-blue-40);
  --color-status-badge-closed: var(--palette-indigo-grey-40);
  --color-status-badge-open: var(--palette-blue-40);

  /* Tooltips */
  --color-shadow-tooltip: rgb(48 52 67 / 20%);
  --color-tooltip-border: var(--palette-indigo-grey-20);
  --color-tooltip-text: var(--palette-indigo-grey-90);
  --color-tooltip-subtitle: var(--palette-indigo-grey-100);

  /* Toast Notifications */
  --color-toast-info-bg: var(--palette-indigo-grey-10);
  --color-toast-info-border: var(--palette-indigo-grey-30);
  --color-toast-success-bg: var(--palette-green-10);
  --color-toast-success-border: #93cd86;
  --color-toast-warning-bg: #fffae5;
  --color-toast-warning-border: #ffe889;
  --color-toast-error-bg: var(--palette-red-10);
  --color-toast-error-border: #ffb1a2;
  --color-toast-icon-info: #7b87fe;
  --color-toast-icon-info-bg: #505ff11a;
  --color-toast-icon-success: var(--palette-green-60);
  --color-toast-icon-success-bg: #75c1631a;
  --color-toast-icon-warning: #ffae62;
  --color-toast-icon-warning-bg: #ffae621a;
  --color-toast-icon-error: var(--palette-red-60);
  --color-toast-icon-error-bg: #e15a411a;
  --color-toast-text: var(--palette-indigo-grey-100);

  /* Charts */
  --color-chart-today-line: var(--color-neutral-700);
  --color-chart-today-label: var(--color-text-subheading);

  /* Global Status Indicator */
  --color-global-indicator-background: var(--palette-white);
  --color-global-indicator-bottom-border: var(--palette-indigo-grey-40);
  --color-global-indicator-text: var(--palette-indigo-grey-100);
  --color-global-indicator-job-count-badge: var(--palette-indigo-grey-70);
  --color-global-indicator-shimmer-overlay: rgb(255 255 255 / 40%);
  --color-global-indicator-error: var(--palette-red-60);
  --color-global-indicator-success: var(--palette-green-60);
  --color-global-indicator-error-gradient-start: var(--palette-red-60);
  --color-global-indicator-error-gradient-end: var(--palette-red-50);
  --color-global-indicator-shadow: 0 4px 12px rgb(0 0 0 / 15%);
}