:root,
body.light,
body.light .body-content {
  color-scheme: light;

  --cx-bg:                 #fff;
  --cx-bg-shell:           #EFF1F4;
  --cx-surface:            rgba(69, 137, 141, 0.06);
  --cx-surface-raised:     #fff;
  --cx-surface-soft:       rgba(255, 255, 255, 0.1);
  --cx-icon-bg:            #fff;
  --cx-stat-bg:            rgba(255, 255, 255, 0.40);
  --cx-chip-bg:            rgba(231, 231, 231, 0.20);
  --cx-card:               #FAFAFA;
  --cx-card-desc:          #747474;
  --cx-action-bg:          var(--cx-teal-light);
  --cx-action-bg-hover:    #487DBC;
  --cx-btn-light-bg:       #FFFFFF;
  --cx-input-bg:           #FFFFFF;
  --cx-control-bg-subtle:  rgba(0, 0, 0, 0.03);

  --cx-teal:               #3A7F81;
  --cx-teal-light:         #487DBC;
  --cx-accent:             #487DBC;
  --cx-accent-soft:        rgba(72, 125, 188, 0.10);
  --cx-icon-accent:        #4EBBAC;
  --cx-on-teal:            #45898D;
  --cx-on-accent:          #FFFFFF;
  --cx-pagination-active:  var(--cx-teal-light);

  --cx-text:               #2F2F2F;
  --cx-text-muted:         #A0A0A4;
  --cx-text-soft:          #5D5F60;
  --cx-text-label:         #626262;
  --cx-text-subtitle:      #00000094;
  --cx-text-hint:          #616161;
  --cx-text-body-muted:    #000;
  --cx-text-placeholder:   #606C70;
  --cx-text-disabled:      #A2ABBD;
  --cx-text-faint:         #000;
  --cx-text-meta:          #C1C3C2;
  --cx-text-invert:        #FFFFFF;
  --cx-label:              #454545F5;
  --cx-chip-text:          #8D8D8D;
  --cx-tab-text:           #727E8E;
  --cx-tab-text-active:    #487DBC;
  --cx-breadcrumb:         #95A7BF;
  --cx-breadcrumb-active:  var(--cx-accent);
  --cx-link:               #1F59CA;
  --cx-input-placeholder:  #99A5B6;

  --cx-border:             #D0D6DE;
  --cx-border-soft:        #E6E7EC;
  --cx-divider:            #E0E4EB;
  --cx-divider-line:       rgba(0, 0, 0, 0.06);
  --cx-divider-strong:     rgba(0, 0, 0, 0.12);
  --cx-neutral:            #CCCCCC;
  --cx-chip-border:        #E7E7E7;
  --cx-checkbox-border:    rgba(0, 0, 0, 0.25);
  --cx-focus-ring:         rgba(72, 125, 188, 0.35);
  --cx-switch-track:       rgba(121, 126, 141, 0.45);
  --cx-switch-knob:        #FFFFFF;
  --cx-switch-track-on:    rgba(72, 125, 188, 0.20);
  --cx-switch-knob-on:     #487DBC;
  --cx-switch-label:       #797E8D;
  --cx-switch-label-on:    #487DBC;

  --cx-inprogress:         #DFA300;
  --cx-atrisk:             #FF8336;
  --cx-completed:          #40DA6F;
  --cx-overdue:            #FF6064;
  --cx-pendingapproval:    #83AAFF;
  --cx-notify-badge:       #EF3F43;
  --cx-warning:            #E9C154;
  --cx-success:            #04D47D;
  --cx-error:              #FD5454;
  --cx-badge-inprogress-bg:      #F1CC671A;
  --cx-badge-atrisk-bg:          #FF811817;
  --cx-badge-completed-bg:       #22FFA61A;
  --cx-badge-overdue-bg:         #F05D6136;
  --cx-badge-pendingapproval-bg: #83AAFF4A;
  --cx-tag-green:          #4CA201;
  --cx-tag-green-bg:       rgba(76, 162, 1, 0.10);
  --cx-tag-yellow:         #C1A30A;
  --cx-tag-yellow-bg:      rgba(193, 163, 10, 0.10);
  --cx-tag-orange:         #C96E00;
  --cx-tag-orange-bg:      rgba(201, 110, 0, 0.10);
  --cx-tag-red:            #D14346;
  --cx-tag-red-bg:         rgba(209, 67, 70, 0.10);
  --cx-tag-grey:           rgba(121, 126, 141, 0.60);
  --cx-tag-grey-bg:        rgba(121, 126, 141, 0.10);
  --cx-tag-blue:           #487DBC;
  --cx-tag-blue-bg:        rgba(72, 125, 188, 0.10);

  --cx-sidebar-bg:            #FFFFFF;
  --cx-sidebar-border:        #E6E7EC;
  --cx-sidebar-item:          #727E8E;
  --cx-sidebar-item-hover-bg: rgba(72, 125, 188, 0.10);
  --cx-sidebar-item-active:   #487DBC;
  --cx-topbar-icon:           #2E2E2E;

  --cx-glass-bg:           rgba(239, 241, 244, 0.20);
  --cx-action-menu-border: #fff;
  --cx-action-menu-bg:        rgba(69, 137, 141, 0.13);
  --cx-action-menu-item:     rgba(255, 255, 255, 0.80);
  --cx-action-menu-item-hover: rgba(255, 255, 255, 0.80);
  --cx-hover-overlay:      rgba(0, 0, 0, 0.04);
  --cx-menu-bg:            #FFFFFF;
  --cx-menu-item-bg:       #FFFFFF;
  --cx-menu-item-bg-hover: rgba(72, 125, 188, 0.10);
  --cx-table-wrap-bg:      #FFFFFF;
  --cx-table-header-bg:    rgba(69, 137, 141, 0.07);
  --cx-table-row-bg:       #FFFFFF;
  --cx-table-row-alt-bg:   #FAFAFA;
  --cx-table-row-hover-bg: rgba(72, 125, 188, 0.06);
  --cx-dropdown-shadow:    0 8px 24px rgba(0, 0, 0, 0.12);
  --cx-icon-muted:         #99A5B6;
  --cx-scrollbar-thumb:    rgba(0, 0, 0, 0.2);
  --cx-scrollbar-track:    rgba(0, 0, 0, 0.04);

  --cx-modal-overlay:      linear-gradient(180deg, rgba(49, 58, 72, 0.8) 0%, rgba(39, 51, 68, 0.8) 100%);
  --cx-modal-surface:      #FFFFFF;
  --cx-modal-shadow:       0px 4px 40px 0px rgba(0, 0, 0, 0.12);

  --chart-tit-color:       #487DBC;
  --chart-tit-bg:          #FAFAFA;
  --cx-chart-grid:         #E0E4EB;
  --cx-chart-axis-text:    #727E8E;
  --cx-chart-value-label:  #487DBC;

  --cx-shadow-sm:          0 1px 3px rgba(89, 108, 148, 0.08);
  --cx-shadow-md:          0 6px 29px rgba(89, 108, 148, 0.07);

  --cx-icon-filter:        none;
  --cx-icon-filter-accent: none;
}

body.dark,
body.dark .body-content {
  color-scheme: dark;

  --cx-bg:                 #0D1414;
  --cx-bg-shell:           #0D1414;
  --cx-surface:            #223434;
  --cx-surface-raised:     #152020;
  --cx-surface-soft:       rgba(255, 255, 255, 0.1);
  --cx-icon-bg:            rgba(255, 255, 255, 0.1);
  --cx-stat-bg:            #3B6C6F29;
  --cx-chip-bg:            rgba(18, 26, 26, 0.2);
  --cx-card:               rgba(255, 255, 255, 0.04);
  --cx-card-desc:          #D2D2D2;
  --cx-action-bg:          rgba(255, 255, 255, 0.15);
  --cx-action-bg-hover:    #223B52;
  --cx-btn-light-bg:       #FFFFFF;
  --cx-input-bg:           #FFFFFF1C;
  --cx-control-bg-subtle:  #FFFFFF1A;

  --cx-teal:               #00D4CC;
  --cx-teal-light:         #60C4C7;
  --cx-accent:             #60C4C7;
  --cx-accent-soft:        rgba(96, 196, 199, 0.12);
  --cx-icon-accent:        #4EBBAC;
  --cx-on-teal:            #0A1520;
  --cx-on-accent:          #0D1414;
  --cx-pagination-active:  var(--cx-accent);

  --cx-text:               #FFFFFF;
  --cx-text-muted:         rgba(255, 255, 255, 0.54);
  --cx-text-soft:          rgba(255, 255, 255, 0.66);
  --cx-text-label:         #FFFFFFD6;
  --cx-text-subtitle:      #FFFFFF91;
  --cx-text-hint:          #FFFFFF75;
  --cx-text-body-muted:    #FFFFFFB2;
  --cx-text-placeholder:   #FFFFFF5E;
  --cx-text-disabled:      #FFFFFF52;
  --cx-text-faint:         #FFFFFF4F;
  --cx-text-meta:          #C1C3C2;
  --cx-text-invert:        #0D1414;
  --cx-label:              #A0A0A4;
  --cx-chip-text:          #D7D7D7;
  --cx-tab-text:           #D0D0D1;
  --cx-tab-text-active:    #60C4C7;
  --cx-breadcrumb:         #95A7BF;
  --cx-breadcrumb-active:  var(--cx-accent);
  --cx-link:               #60C4C7;
  --cx-input-placeholder:  rgba(255, 255, 255, 0.38);

  --cx-border:             rgba(247, 247, 247, 0.10);
  --cx-border-soft:        rgba(255, 255, 255, 0.10);
  --cx-divider:            rgba(255, 255, 255, 0.07);
  --cx-divider-line:       #FFFFFF1C;
  --cx-divider-strong:     #FFFFFF30;
  --cx-neutral:            #CCCCCC;
  --cx-chip-border:        #FFFFFF;
  --cx-checkbox-border:    rgba(255, 255, 255, 0.3);
  --cx-focus-ring:         rgba(86, 206, 213, 0.45);
  --cx-switch-track:       rgba(190, 196, 211, 0.35);
  --cx-switch-knob:        #FFFFFF;
  --cx-switch-track-on:    rgba(86, 206, 213, 0.20);
  --cx-switch-knob-on:     #60C4C7;
  --cx-switch-label:       rgba(255, 255, 255, 0.54);
  --cx-switch-label-on:    #60C4C7;

  --cx-inprogress:         #FFEF61;
  --cx-atrisk:             #FF8336;
  --cx-completed:          #40DA6F;
  --cx-overdue:            #FF6064;
  --cx-pendingapproval:    #83AAFF;
  --cx-notify-badge:       #EF3F43;
  --cx-warning:            #FFEF61;
  --cx-success:            #40DA6F;
  --cx-error:              #FF6064;
  --cx-badge-inprogress-bg:      #F1CC671A;
  --cx-badge-atrisk-bg:          #FF811817;
  --cx-badge-completed-bg:       #22FFA61A;
  --cx-badge-overdue-bg:         #F05D6136;
  --cx-badge-pendingapproval-bg: #83AAFF4A;
  --cx-tag-green:          #34C77B;
  --cx-tag-green-bg:       rgba(52, 199, 123, 0.12);
  --cx-tag-yellow:         #E5C21A;
  --cx-tag-yellow-bg:      rgba(229, 194, 26, 0.18);
  --cx-tag-orange:         #F39A2B;
  --cx-tag-orange-bg:      rgba(243, 154, 43, 0.15);
  --cx-tag-red:            #F0555A;
  --cx-tag-red-bg:         rgba(240, 85, 90, 0.15);
  --cx-tag-grey:           #A3A7B2;
  --cx-tag-grey-bg:        rgba(163, 167, 178, 0.18);
  --cx-tag-blue:           #519DF7;
  --cx-tag-blue-bg:        rgba(81, 157, 247, 0.15);

  --cx-sidebar-bg:            #101A1B;
  --cx-sidebar-border:        rgba(255, 255, 255, 0.07);
  --cx-sidebar-item:          #BFD3D3;
  --cx-sidebar-item-hover-bg: rgba(255, 255, 255, 0.10);
  --cx-sidebar-item-active:   #60C4C7;
  --cx-topbar-icon:           #FFFFFF;

  --cx-glass-bg:           rgba(21, 30, 31, 0.2);
  --cx-action-menu-border:     rgba(255, 255, 255, 0.16);
  --cx-action-menu-bg:         rgba(48, 62, 62, 0.98);
  --cx-action-menu-item:       #3F4646;
  --cx-action-menu-item-hover: #4C5454;
  --cx-hover-overlay:      rgba(255, 255, 255, 0.08);
  --cx-menu-bg:            #223434;
  --cx-menu-item-bg:       #363B3B;
  --cx-menu-item-bg-hover: #444949;
  --cx-table-wrap-bg:      transparent;
  --cx-table-header-bg:    var(--cx-stat-bg);
  --cx-table-row-bg:       var(--cx-bg);
  --cx-table-row-alt-bg:   var(--cx-bg);
  --cx-table-row-hover-bg: rgba(86, 206, 213, 0.08);
  --cx-dropdown-shadow:    0 8px 24px rgba(0, 0, 0, 0.35);
  --cx-icon-muted:         #FFFFFF85;
  --cx-scrollbar-thumb:    rgba(255, 255, 255, 0.2);
  --cx-scrollbar-track:    rgba(255, 255, 255, 0.04);

  --cx-modal-overlay:      linear-gradient(180deg, rgba(49, 58, 72, 0.8) 0%, rgba(39, 51, 68, 0.8) 100%);
  --cx-modal-surface:      #0E1515;
  --cx-modal-shadow:       0px 4px 40px 0px #60C4C71F;

  --chart-tit-color:       #0AB39C;
  --chart-tit-bg:          rgba(58, 127, 129, 0.09);
  --cx-chart-grid:         rgba(255, 255, 255, 0.10);
  --cx-chart-axis-text:    rgba(255, 255, 255, 0.66);
  --cx-chart-value-label:  #FFFFFF;

  --cx-shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.35);
  --cx-shadow-md:          0 6px 29px rgba(0, 0, 0, 0.45);

  --cx-icon-filter:        brightness(0) invert(1);
  --cx-icon-filter-accent: brightness(0) saturate(100%) invert(78%) sepia(23%) saturate(721%) hue-rotate(131deg) brightness(93%) contrast(92%);
}

body.blue-dark,
body.blue-dark .body-content {
  color-scheme: dark;

  --cx-bg:                 #141823;
  --cx-bg-shell:           #141823;
  --cx-surface:            #1D2636;
  --cx-surface-raised:     #1A2131;
  --cx-surface-soft:       rgba(190, 196, 211, 0.10);
  --cx-icon-bg:            rgba(72, 125, 188, 0.20);
  --cx-stat-bg:            rgba(72, 125, 188, 0.10);
  --cx-chip-bg:            rgba(190, 196, 211, 0.10);
  --cx-card:               rgba(72, 125, 188, 0.10);
  --cx-card-desc:          rgba(190, 196, 211, 0.60);
  --cx-action-bg:          rgba(255, 255, 255, 0.15);
  --cx-action-bg-hover:    #223B52;
  --cx-btn-light-bg:       #FFFFFF;
  --cx-input-bg:           rgba(72, 125, 188, 0.20);
  --cx-control-bg-subtle:  rgba(72, 125, 188, 0.20);

  --cx-teal:               #519DF7;
  --cx-teal-light:         #519DF7;
  --cx-accent:             #519DF7;
  --cx-accent-soft:        rgba(72, 125, 188, 0.20);
  --cx-icon-accent:        #519DF7;
  --cx-on-teal:            #0A1520;
  --cx-on-accent:          #FFFFFF;
  --cx-pagination-active:  var(--cx-accent);

  --cx-text:               #FFFFFF;
  --cx-text-muted:         rgba(190, 196, 211, 0.60);
  --cx-text-soft:          #BEC4D3;
  --cx-text-label:         #D7D7D7;
  --cx-text-subtitle:      #BEC4D3;
  --cx-text-hint:          rgba(190, 196, 211, 0.60);
  --cx-text-body-muted:    rgba(255, 255, 255, 0.49);
  --cx-text-placeholder:   rgba(190, 196, 211, 0.45);
  --cx-text-disabled:      rgba(190, 196, 211, 0.35);
  --cx-text-faint:         rgba(255, 255, 255, 0.31);
  --cx-text-meta:          #BEC4D3;
  --cx-text-invert:        #141823;
  --cx-label:              #D7D7D7;
  --cx-chip-text:          #D7D7D7;
  --cx-tab-text:           #BEC4D3;
  --cx-tab-text-active:    #519DF7;
  --cx-breadcrumb:         #BEC4D3;
  --cx-breadcrumb-active:  var(--cx-accent);
  --cx-link:               #519DF7;
  --cx-input-placeholder:  rgba(190, 196, 211, 0.45);

  --cx-border:             rgba(255, 255, 255, 0.14);
  --cx-border-soft:        rgba(190, 196, 211, 0.10);
  --cx-divider:            rgba(190, 196, 211, 0.10);
  --cx-divider-line:       rgba(255, 255, 255, 0.10);
  --cx-divider-strong:     rgba(255, 255, 255, 0.20);
  --cx-neutral:            #CFD0D1;
  --cx-chip-border:        rgba(190, 196, 211, 0.30);
  --cx-checkbox-border:    rgba(190, 196, 211, 0.35);
  --cx-focus-ring:         rgba(81, 157, 247, 0.45);
  --cx-switch-track:       rgba(190, 196, 211, 0.35);
  --cx-switch-knob:        #FFFFFF;
  --cx-switch-track-on:    rgba(81, 157, 247, 0.20);
  --cx-switch-knob-on:     #519DF7;
  --cx-switch-label:       rgba(190, 196, 211, 0.60);
  --cx-switch-label-on:    #519DF7;

  --cx-inprogress:         #FFEF61;
  --cx-atrisk:             #FF8336;
  --cx-completed:          #40DA6F;
  --cx-overdue:            #FF6064;
  --cx-pendingapproval:    #83AAFF;
  --cx-notify-badge:       #EF3F43;
  --cx-warning:            #FFEF61;
  --cx-success:            #40DA6F;
  --cx-error:              #FF6064;
  --cx-badge-inprogress-bg:      #F1CC671A;
  --cx-badge-atrisk-bg:          #FF811817;
  --cx-badge-completed-bg:       #22FFA61A;
  --cx-badge-overdue-bg:         #F05D6136;
  --cx-badge-pendingapproval-bg: #83AAFF4A;
  --cx-tag-green:          #34C77B;
  --cx-tag-green-bg:       rgba(52, 199, 123, 0.12);
  --cx-tag-yellow:         #E5C21A;
  --cx-tag-yellow-bg:      rgba(229, 194, 26, 0.18);
  --cx-tag-orange:         #F39A2B;
  --cx-tag-orange-bg:      rgba(243, 154, 43, 0.15);
  --cx-tag-red:            #F0555A;
  --cx-tag-red-bg:         rgba(240, 85, 90, 0.15);
  --cx-tag-grey:           #A3A7B2;
  --cx-tag-grey-bg:        rgba(163, 167, 178, 0.18);
  --cx-tag-blue:           #519DF7;
  --cx-tag-blue-bg:        rgba(81, 157, 247, 0.15);

  --cx-sidebar-bg:            #141823;
  --cx-sidebar-border:        rgba(190, 196, 211, 0.10);
  --cx-sidebar-item:          #BEC4D3;
  --cx-sidebar-item-hover-bg: rgba(190, 196, 211, 0.10);
  --cx-sidebar-item-active:   #519DF7;
  --cx-topbar-icon:           #FFFFFF;

  --cx-glass-bg:           rgba(29, 38, 54, 0.20);
  --cx-action-menu-border:     rgba(190, 196, 211, 0.24);
  --cx-action-menu-bg:         rgba(45, 58, 80, 0.98);
  --cx-action-menu-item:       #38455D;
  --cx-action-menu-item-hover: #44536E;
  --cx-hover-overlay:      rgba(190, 196, 211, 0.10);
  --cx-menu-bg:            #1D2636;
  --cx-menu-item-bg:       #1D2636;
  --cx-menu-item-bg-hover: rgba(72, 125, 188, 0.20);
  --cx-table-wrap-bg:      transparent;
  --cx-table-header-bg:    rgba(72, 125, 188, 0.10);
  --cx-table-row-bg:       var(--cx-bg);
  --cx-table-row-alt-bg:   var(--cx-bg);
  --cx-table-row-hover-bg: rgba(72, 125, 188, 0.12);
  --cx-dropdown-shadow:    0 8px 24px rgba(0, 0, 0, 0.35);
  --cx-icon-muted:         rgba(190, 196, 211, 0.60);
  --cx-scrollbar-thumb:    rgba(190, 196, 211, 0.25);
  --cx-scrollbar-track:    rgba(190, 196, 211, 0.06);

  --cx-modal-overlay:      linear-gradient(180deg, rgba(20, 24, 35, 0.85) 0%, rgba(29, 38, 54, 0.85) 100%);
  --cx-modal-surface:      #1A2131;
  --cx-modal-shadow:       0px 4px 40px 0px rgba(81, 157, 247, 0.12);

  --chart-tit-color:       #519DF7;
  --chart-tit-bg:          rgba(190, 196, 211, 0.10);
  --cx-chart-grid:         rgba(190, 196, 211, 0.12);
  --cx-chart-axis-text:    #BEC4D3;
  --cx-chart-value-label:  #FFFFFF;

  --cx-shadow-sm:          0 0.751px 3.631px rgba(89, 108, 148, 0.04);
  --cx-shadow-md:          0 6px 29px rgba(89, 108, 148, 0.07);

  --cx-icon-filter:        brightness(0) invert(1);
  --cx-icon-filter-accent: brightness(0) saturate(100%) invert(52%) sepia(59%) saturate(1044%) hue-rotate(189deg) brightness(99%) contrast(95%);
}

html:has(> body.dark),
html:has(> body.blue-dark) {
  color-scheme: dark;
}