.hbr-mode-dark {
  color-scheme: dark;
}

.hbr-mode-dark {
  /* --hbr-color-success-strong: var(--hbr-color-success-70);
  --hbr-color-success-highlight: rgba(0, 211, 99, 0.5);
  --hbr-color-success-text: var(--hbr-color-success-80);

  --hbr-color-warning-strong: var(--hbr-color-warning-65);
  --hbr-color-warning-highlight: rgba(252, 157, 3, 0.5);
  --hbr-color-warning-text: var(--hbr-color-warning-80);

  --hbr-color-danger-strong: var(--hbr-color-danger-70);
  --hbr-color-danger-highlight: rgba(212, 55, 28, 0.5);
  --hbr-color-danger-text: var(--hbr-color-danger-80);

  --hbr-color-info: var(--hbr-color-interact-85);
  --hbr-color-info-highlight: var(--hbr-color-interact-highlight);
  --hbr-color-info-text: var(--hbr-color-interact-80);


  --hbr-color-text-heading: var(--hbr-color-neutral-text); */

  /* Form Elements */
  /* --hbr-control-color-bg: var(--hbr-color-neutral-40);
  --hbr-control-color-bg-hover: var(--hbr-color-neutral-40);
  --hbr-control-color-bg-focus: var(--hbr-color-neutral-40);
  --hbr-control-color-bg-disabled: var(--hbr-color-neutral-50);
  --hbr-control-color-border: var(--hbr-color-neutral-55);
  --hbr-control-color-border-hover: var(--hbr-color-neutral-60);
  --hbr-control-color-border-focus: var(--hbr-color-interact-65);
  --hbr-control-color-border-disabled: var(--hbr-color-neutral-85);
  --hbr-control-color-border-invalid: var(--hbr-color-danger-65);
  --hbr-control-font-family: var(--hbr-font-body);
  --hbr-control-font-weight: var(--hbr-font-weight-normal);
  --hbr-control-font-size-sm: var(--hbr-font-size-sm);
  --hbr-control-font-size-md: var(--hbr-font-size-sm);
  --hbr-control-font-size-lg: var(--hbr-font-size-lg);
  --hbr-control-spacing-letter: var(--hbr-font-letter-spacing-normal);
  --hbr-control-color-border: var(--hbr-color-neutral-55);
  --hbr-control-color-border-hover: var(--hbr-color-neutral-60);
  --hbr-control-color-border-focus: var(--hbr-color-interact-70);
  --hbr-control-color-border-disabled: var(--hbr-color-neutral-55);
  --hbr-control-color-border-invalid: var(--hbr-color-danger-65);
  --hbr-control-color: var(--hbr-color-neutral-85);
  --hbr-control-color-hover: var(--hbr-color-neutral-85);
  --hbr-control-color-focus: var(--hbr-color-neutral-85);
  --hbr-control-color-disabled: var(--hbr-color-90);
  --hbr-control-color-invalid: var(--hbr-color-danger-60);
  --hbr-control-color-placeholder: var(--hbr-color-neutral-60); */

  /* Inputs */
  /* --hbr-input-color-icon: var(--hbr-color-neutral-65);
  --hbr-input-color-icon-hover: var(--hbr-color-neutral-80);
  --hbr-input-color-icon-focus: var(--hbr-color-neutral-80); */

  /* Overlays */
  /* --hbr-color-overlay-bg: #d1d5db22; */

  /*  Panels */
  /* --hbr-panel-color-background: var(--hbr-color-neutral-40);
  --hbr-panel-color-border: var(--hbr-color-neutral-50); */

  /* Tooltips */
  /* --hbr-tooltip-background-color: var(--hbr-color-neutral-85);
  --hbr-tooltip-color: var(--hbr-color-neutral-0); */

  /** AI sentiment */
  --hbr-color-ai-gradient: linear-gradient(27deg, #3B76EA 10.22%, #00BCEB 88.93%, #63FFF7 162.86%);
  --hbr-color-ai-gradient-bg: linear-gradient(var(--hbr-color-neutral-bg), var(--hbr-color-neutral-bg)) padding-box, var(--hbr-color-ai-gradient);

  /* Visualization - deprecated */
  --hbr-color-chart-1a: #8ea8f5;
  --hbr-color-chart-1b: #6c84e6;
  --hbr-color-chart-1c: #4960d6;
  --hbr-color-chart-1d: #3a49b5;
  --hbr-color-chart-1e: #32388c;

  --hbr-color-chart-2a: #d3a4fc;
  --hbr-color-chart-2b: #b779fc;
  --hbr-color-chart-2c: #9754f0;
  --hbr-color-chart-2d: #6a3ec9;
  --hbr-color-chart-2e: #5437a6;

  --hbr-color-chart-3a: #94e8eb;
  --hbr-color-chart-3b: #4cd2e4;
  --hbr-color-chart-3c: #00bad4;
  --hbr-color-chart-3d: #0099b4;
  --hbr-color-chart-3e: #00728f;

  --hbr-color-chart-4a: #d5cfed;
  --hbr-color-chart-4b: #c5bee0;
  --hbr-color-chart-4c: #998ebe;
  --hbr-color-chart-4d: #7b6f9f;
  --hbr-color-chart-4e: #4a4162;

  --hbr-color-chart-5a: #f8c9fb;
  --hbr-color-chart-5b: #f094f0;
  --hbr-color-chart-5c: #de6bde;
  --hbr-color-chart-5d: #c938c4;
  --hbr-color-chart-5e: #9c2f91;

  --hbr-color-chart-6a: #a6dbd6;
  --hbr-color-chart-6b: #74c7c0;
  --hbr-color-chart-6c: #1cc0b3;
  --hbr-color-chart-6d: #16948a;
  --hbr-color-chart-6e: #0f6760;

  --hbr-color-chart-7a: #f293c3;
  --hbr-color-chart-7b: #ef74b2;
  --hbr-color-chart-7c: #eb56a1;
  --hbr-color-chart-7d: #d5488f;
  --hbr-color-chart-7e: #bf3379;

  --hbr-color-chart-8a: #d5d6f6;
  --hbr-color-chart-8b: #bdbef0;
  --hbr-color-chart-8c: #9593de;
  --hbr-color-chart-8d: #6f6cd2;
  --hbr-color-chart-8e: #4845c6;

  --hbr-color-chart-9a: #e1b7ff;
  --hbr-color-chart-9b: #d395ff;
  --hbr-color-chart-9c: #cc84ff;
  --hbr-color-chart-9d: #b751ff;
  --hbr-color-chart-9e: #a21eff;

  --hbr-color-chart-10a: #90caf9;
  --hbr-color-chart-10b: #42a5f5;
  --hbr-color-chart-10c: #1e88e5;
  --hbr-color-chart-10d: #1565c0;
  --hbr-color-chart-10e: #0d47a1;

  --hbr-color-chart-11a: #d6dee2;
  --hbr-color-chart-11b: #aebcc6;
  --hbr-color-chart-11c: #869caa;
  --hbr-color-chart-11d: #5d7a8d;
  --hbr-color-chart-11e: #465b69;

  --hbr-color-chart-12a: #ffc7d2;
  --hbr-color-chart-12b: #ecadc3;
  --hbr-color-chart-12c: #e485a7;
  --hbr-color-chart-12d: #db5c89;
  --hbr-color-chart-12e: #d83f75;

  --hbr-color-diverging-1a: #6c84e6;
  --hbr-color-diverging-1b: #4960d6;
  --hbr-color-diverging-1c: #3a49b5;
  --hbr-color-diverging-1d: #32388c;
  --hbr-color-diverging-2a: #aa99d6;
  --hbr-color-diverging-2b: #8d76cb;
  --hbr-color-diverging-2c: #765dba;
  --hbr-color-diverging-2d: #5d44a0;
  --hbr-color-diverging-3a: #d1bce2;
  --hbr-color-diverging-3b: #b895d6;
  --hbr-color-diverging-3c: #a075c3;
  --hbr-color-diverging-3d: #8751b4;
  --hbr-color-diverging-4a: #e9d1f0;
  --hbr-color-diverging-4b: #d7abe3;
  --hbr-color-diverging-4c: #c584d7;
  --hbr-color-diverging-4d: #b35eca;
  --hbr-color-diverging-5a: #fbe2fd;
  --hbr-color-diverging-5b: #f8c9fb;
  --hbr-color-diverging-5c: #f094f0;
  --hbr-color-diverging-5d: #de6bde;

  /*****
  Elevation tokens
  *****/
  --hbr-shadow-xs: 0px 0px 30px rgba(0, 0, 0, 0.2), 0px 1px 8px rgba(0, 0, 0, 0.2);
  --hbr-shadow-sm: 0px 0px 8px rgba(0, 0, 0, 0.38), 0px 2px 6px rgba(0, 0, 0, 0.38);
  --hbr-shadow-md: 0px 0px 8px rgba(0, 0, 0, 0.36), 0px 4px 12px rgba(0, 0, 0, 0.36);
  --hbr-shadow-lg: 0px 0px 32px rgba(0, 0, 0, 0.5), 0px 6px 15px rgba(0, 0, 0, 0.5);
  --hbr-shadow-xl: 0px 0px 60px rgba(0, 0, 0, 0.6), 0px 5px 20px rgba(0, 0, 0, 0.6);
}

/* Avatar */
.hbr-mode-dark hbr-avatar::part(base) {
  background-color: var(--hbr-color-neutral-55);
  color: var(--hbr-color-neutral-80);
}

/* Button */
.hbr-mode-dark hbr-button[variant="outline"]::part(base) {
  --bg-color: var(--hbr-color-neutral-bg-medium);
  --bg-color-hover: var(--hbr-color-neutral-bg-hover);
}

/* Card */
.hbr-mode-dark hbr-card {
  --outline-color: var(--hbr-color-neutral-border-weak);
}

/* Color picker */
.hbr-mode-dark hbr-color-picker::part(format-button) {
  background-color: var(--hbr-color-neutral-40);
  border-color: var(--hbr-color-neutral-55);
  color: var(--hbr-color-neutral-70);
}

.hbr-mode-dark hbr-color-picker::part(format-button):hover {
  background-color: var(--hbr-color-interact-35);
  border-color: var(--hbr-color-interact-50);
  color: var(--hbr-color-interact-70);
}

.hbr-mode-dark hbr-color-picker::part(format-button):focus {
  background-color: var(--hbr-color-interact-35);
  border-color: var(--hbr-color-interact-50);
  color: var(--hbr-color-interact-70);
  /* box-shadow: 0 0 0 var(--hbr-focus-ring-width)
    hsla(var(--hbr-color-interact-hue), var(--hbr-color-interact-saturation), 50%, var(--hbr-focus-ring-alpha)); */
}

.hbr-mode-dark hbr-color-picker::part(format-button):active {
  background-color: var(--hbr-color-interact-40);
  border-color: var(--hbr-color-interact-55);
  color: var(--hbr-color-interact-80);
}

.hbr-mode-dark hbr-color-picker::part(panel) {
  background-color: var(--hbr-color-neutral-40);
  border-color: var(--hbr-color-neutral-50);
}

.hbr-mode-dark hbr-color-picker::part(slider-handle) {
  background-color: var(--hbr-color-neutral-50);
  box-shadow: 0 0 0 1px var(--hbr-color-neutral-60);
}

.hbr-mode-dark hbr-color-picker::part(slider-handle):focus {
  box-shadow: 0 0 0 1px var(--hbr-color-interact-65), 0 0 0 var(--hbr-focus-ring-width) var(--hbr-color-interact-focus);
}

.hbr-mode-dark hbr-color-picker::part(grid-handle) {
  border-color: var(--hbr-color-neutral-40);
}

.hbr-mode-dark hbr-color-picker::part(preview),
.hbr-mode-dark hbr-color-picker::part(opacity-slider),
.hbr-mode-dark hbr-color-picker::part(trigger) {
  background-image: linear-gradient(45deg, #333 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #333 75%),
    linear-gradient(45deg, transparent 75%, #333 75%), linear-gradient(45deg, #333 25%, transparent 25%);
}

.hbr-mode-dark hbr-color-picker::part(swatches) {
  border-top-color: var(--hbr-color-neutral-50);
}

/* Details */
.hbr-mode-dark hbr-details::part(base) {
  border-color: var(--hbr-color-neutral-50);
}

/* Image comparer */
.hbr-mode-dark hbr-image-comparer::part(divider),
.hbr-mode-dark hbr-image-comparer::part(handle) {
  background-color: var(--hbr-color-neutral-40);
  color: var(--hbr-color-neutral-70);
}

/* Menu item */
.hbr-mode-dark hbr-menu-item::part(base) {
  color: var(--hbr-color-neutral-85);
}

.hbr-mode-dark hbr-menu-item[disabled]::part(base) {
  color: var(--hbr-color-neutral-60);
}

.hbr-mode-dark hbr-progress-bar::part(indicator) {
  color: var(--hbr-color-neutral-40);
}

/* Progress ring */
.hbr-mode-dark hbr-progress-ring::part(base) {
  --track-color: var(--hbr-color-neutral-50);
}

/* Radio, related checkbox */
.hbr-mode-dark hbr-radio::part(default-icon),
.hbr-mode-dark hbr-radio::part(checked-icon),
.hbr-mode-dark hbr-checkbox::part(default-icon),
.hbr-mode-dark hbr-checkbox::part(checked-icon) {
  --path-secondary-color: var(--hbr-color-neutral-bg-weak);
}

.hbr-mode-dark hbr-radio::part(control-focus),
.hbr-mode-dark hbr-checkbox::part(control-focus) {
  box-shadow: 0 0px 0px 2px var(--hbr-color-interact-highlight);
}

/* Range */
.hbr-mode-dark hbr-range {
  --track-color: var(--hbr-color-neutral-50);
}

/* Rating */
.hbr-mode-dark hbr-rating {
  --symbol-color: var(--hbr-color-neutral-55);
}

/* Skeleton */
.hbr-mode-dark hbr-skeleton {
  --color: var(--hbr-color-neutral-50);
  --sheen-color: var(--hbr-color-neutral-55);
}

/* Spinner */
.hbr-mode-dark hbr-spinner {
  --track-color: #f9fafb20;
}

.hbr-mode-dark hbr-switch {
  --control-color: var(--hbr-color-neutral-80);
  --thumb-color: var(--hbr-color-neutral-bg-medium);
  --control-hover-color: var(--hbr-color-neutral-70);
  --control-checked-color: var(--hbr-color-interact-45);
  --control-checked-hover-color: var(--hbr-color-interact-40);
  --control-checked-focus-color: var(--hbr-color-interact-40);
  --control-disabled-color: var(--hbr-color-neutral-40);
  --control-checked-disabled-color: var(--hbr-color-interact-bg-disabled);
}

/* Tab group */
.hbr-mode-dark hbr-tab-group::part(tabs) {
  --tabs-border-color: var(--hbr-color-neutral-50);
}

.hbr-mode-dark hbr-table {
  --row-border-bottom-color: var(--hbr-color-gray-45, #656C75);
}