html:root {
  --gray-50: var(--design-neutral-50);
  --gray-100: var(--design-neutral-100);
  --gray-200: var(--design-neutral-200);
  --gray-300: var(--design-neutral-300);
  --gray-400: var(--design-neutral-400);
  --gray-500: var(--design-neutral-500);
  --gray-600: var(--design-neutral-600);
  --gray-700: var(--design-neutral-700);
  --gray-800: var(--design-neutral-800);
  --gray-900: var(--design-neutral-900);
  --gray-950: var(--design-neutral-950);

  --neutral: var(--design-surface-2);
  --invert-neutral: var(--design-text);

  --bg-color: var(--design-surface-2);
  --fg-color: var(--design-surface-2);
  --card-bg: var(--design-surface-2);
  --modal-bg: var(--design-surface-2);
  --popover-bg: var(--design-surface-2);
  --navbar-bg: var(--design-surface-2);
  --subtle-accent: var(--design-surface-1);
  --subtle-fg: var(--design-surface-3);
  --highlight-color: var(--design-surface-3);
  --fg-hover-color: var(--design-surface-hover);
  --control-bg: var(--design-surface-3);
  --control-bg-on-gray: var(--design-surface-hover);
  --disabled-control-bg: var(--design-surface-1);
  --input-disabled-bg: var(--design-surface-1);
  --awesomebar-focus-bg: var(--design-surface-2);
  --awesomplete-hover-bg: var(--design-surface-hover);
  --placeholder-color: var(--design-surface-3);
  --skeleton-bg: var(--design-surface-3);

  --surface-base: var(--design-surface-2);
  --surface-elevation-1: var(--design-surface-2);
  --surface-elevation-2: var(--design-surface-2);
  --surface-elevation-3: var(--design-surface-active);
  --surface-sidebar: var(--design-surface-1);
  --desk-sidebar-bg: var(--design-surface-1);
  --surface-modal: var(--design-surface-2);
  --surface-gray-1: var(--design-surface-1);
  --surface-gray-2: var(--design-surface-3);
  --surface-gray-3: var(--design-surface-hover);
  --surface-gray-4: var(--design-surface-active);
  --surface-gray-5: var(--design-text-muted);
  --surface-gray-6: var(--design-text-muted);
  --surface-gray-7: var(--design-primary);

  --text-color: var(--design-text);
  --heading-color: var(--design-text);
  --text-neutral: var(--design-text);
  --text-dark: var(--design-text);
  --text-muted: var(--design-text-muted);
  --text-light: var(--design-text-muted);
  --disabled-text-color: var(--design-text-muted);
  --ink-gray-1: var(--design-surface-3);
  --ink-gray-2: var(--design-border);
  --ink-gray-3: var(--design-border-strong);
  --ink-gray-4: var(--design-text-muted);
  --ink-gray-5: var(--design-text-muted);
  --ink-gray-6: var(--design-text-muted);
  --ink-gray-7: var(--design-text-muted);
  --ink-gray-8: var(--design-text);
  --ink-gray-9: var(--design-text);
  --ink-base: var(--design-surface-2);
  --ink-white: var(--design-surface-2);
  --ink-blue-link: var(--design-link);
  --icon-stroke: var(--design-text-muted);
  --icon-fill-bg: var(--design-surface-2);

  --border-color: var(--design-border);
  --table-border-color: var(--design-border);
  --dark-border-color: var(--design-border-strong);
  --btn-group-border-color: var(--design-border-strong);
  --border-primary: var(--design-primary);
  --outline-base: var(--design-surface-2);
  --outline-elevation-1: var(--design-border);
  --outline-elevation-2: var(--design-border);
  --outline-gray-1: var(--design-border);
  --outline-gray-2: var(--design-border-strong);
  --outline-gray-3: var(--design-border-strong);
  --outline-gray-4: var(--design-border-strong);
  --outline-gray-5: var(--design-text-muted);

  --primary: var(--design-link);
  --primary-color: var(--design-primary);
  --brand-color: var(--design-primary);
  --btn-primary: var(--design-primary);
  --progress-bar-bg: var(--design-primary);
  --checkbox-color: var(--design-on-primary);
  --date-active-bg: var(--design-primary);
  --date-active-text: var(--design-on-primary);
  --date-range-bg: var(--design-surface-3);
  --btn-default-bg: var(--design-surface-3);
  --btn-default-hover-bg: var(--design-surface-hover);
  --btn-ghost-hover-bg: var(--design-surface-hover);
  --switch-bg: var(--design-border-strong);

  --folder-icon-background-color: var(--design-surface-3);
  --sidebar-select-color: var(--design-surface-active);

  --scrollbar-thumb-color: var(--design-border-strong);
  --scrollbar-track-color: var(--design-surface-3);

  --focus-default: 0 0 0 2px var(--design-link);
  --focus-outline-default: 2px solid var(--design-focus, var(--design-link));
  --focus-outline-red: 2px solid var(--design-danger);
  --checkbox-focus-shadow: 0 0 0 2px var(--design-link);

  --danger: var(--design-danger);
  --success: var(--design-success);
  --warning: var(--design-warning);
  --info: var(--design-info);
  --alert-text-danger: var(--design-danger);
  --alert-text-warning: var(--design-warning);
  --alert-text-info: var(--design-info);
  --alert-text-success: var(--design-success);
  --alert-bg-danger: var(--design-danger-subtle);
  --alert-bg-warning: var(--design-warning-subtle);
  --alert-bg-info: var(--design-info-subtle);
  --alert-bg-success: var(--design-success-subtle);
  --error-bg: var(--design-danger-subtle);
  --error-border: var(--design-danger-border);
  --ink-red-3: var(--design-danger);
  --ink-red-4: var(--design-danger);
  --ink-red-6: var(--design-danger);
  --ink-green-2: var(--design-success);
  --ink-green-3: var(--design-success);
  --ink-green-6: var(--design-success);
  --ink-amber-2: var(--design-warning);
  --ink-amber-3: var(--design-warning);
  --ink-amber-6: var(--design-warning);
  --ink-blue-2: var(--design-info);
  --ink-blue-3: var(--design-info);
  --ink-blue-6: var(--design-info);
  --surface-red-1: var(--design-danger-subtle);
  --surface-red-2: var(--design-danger-subtle);
  --surface-green-1: var(--design-success-subtle);
  --surface-green-2: var(--design-success-subtle);
  --surface-amber-1: var(--design-warning-subtle);
  --surface-amber-2: var(--design-warning-subtle);
  --surface-blue-1: var(--design-info-subtle);
  --surface-blue-2: var(--design-info-subtle);
  --outline-red-1: var(--design-danger-border);
  --outline-red-2: var(--design-danger-border);
  --outline-green-1: var(--design-success-border);
  --outline-green-2: var(--design-success-border);
  --outline-amber-1: var(--design-warning-border);
  --outline-amber-2: var(--design-warning-border);
  --outline-blue-1: var(--design-info-border);
  --bg-green: var(--design-success-subtle);
  --bg-red: var(--design-danger-subtle);
  --bg-orange: var(--design-warning-subtle);
  --bg-yellow: var(--design-warning-subtle);
  --bg-blue: var(--design-info-subtle);
  --bg-light-blue: var(--design-info-subtle);
  --bg-gray: var(--design-surface-3);
  --bg-grey: var(--design-surface-3);
  --bg-light-gray: var(--design-surface-3);
  --bg-dark-gray: var(--design-surface-active);
  --text-on-green: var(--design-success);
  --text-on-red: var(--design-danger);
  --text-on-orange: var(--design-warning);
  --text-on-yellow: var(--design-warning);
  --text-on-blue: var(--design-info);
  --text-on-light-blue: var(--design-info);
  --text-on-gray: var(--design-text-muted);
  --text-on-grey: var(--design-text-muted);
  --text-on-light-gray: var(--design-text);
  --text-on-dark-gray: var(--design-text);
}

html[data-theme="dark"] {
  --gray-50: var(--design-neutral-950);
  --gray-100: var(--design-neutral-900);
  --gray-200: var(--design-neutral-800);
  --gray-300: var(--design-neutral-700);
  --gray-400: var(--design-neutral-600);
  --gray-450: var(--design-neutral-500);
  --gray-500: var(--design-neutral-500);
  --gray-600: var(--design-neutral-400);
  --gray-700: var(--design-neutral-200);
  --gray-800: var(--design-neutral-100);
  --gray-900: var(--design-neutral-50);
  --gray-950: var(--design-neutral-50);
  --shadow-inset: inset 0 -1px 0 var(--design-border);
}

html[data-theme="dark"] :is(.modal, .form-in-grid, .grid-body .editable-row) {
  --control-bg: var(--design-surface-3);
  --border-color: var(--design-border);
  --input-disabled-bg: var(--design-surface-1);
}

html[data-theme="dark"] .progress {
  background-color: var(--design-surface-3);
}

html ::selection {
  color: var(--design-on-primary);
  background: var(--design-primary);
}

html[data-theme="dark"] .chart-container {
  --charts-label-color: var(--design-text-muted);
  --charts-axis-line-color: var(--design-border);
  --charts-dataset-circle-stroke: var(--design-surface-2);
  --charts-tooltip-value: var(--design-text);
  --charts-tooltip-bg: var(--design-surface-3);
}

html body {
  background-color: var(--design-surface-2);
  color: var(--design-text);
}

html .btn.btn-primary {
  --btn-primary: var(--design-primary);
  --neutral: var(--design-on-primary);
  --icon-fill-bg: var(--design-primary);
  background: var(--design-primary);
  color: var(--design-on-primary);
}

html .btn.btn-primary:hover {
  --btn-primary: var(--design-primary-hover);
  background: var(--design-primary-hover);
  color: var(--design-on-primary);
}

html .btn.btn-primary:active,
html[data-theme="dark"] .btn.btn-primary:active {
  --invert-neutral: var(--design-primary-active);
  --gray-100: var(--design-on-primary);
  --gray-900: var(--design-on-primary);
}

html .es-button {
  --bt-solid-bg: var(--design-primary);
  --bt-solid-bg-hover: var(--design-primary-hover);
  --bt-solid-bg-active: var(--design-primary-active);
  --bt-solid-fg: var(--design-on-primary);
}

html .es-button[data-variant="solid"] {
  --icon-stroke: currentColor;
}

html .es-button[data-theme="red"] {
  --bt-solid-bg: var(--design-danger);
  --bt-solid-bg-hover: var(--design-danger-hover);
  --bt-solid-bg-active: var(--design-danger-active);
  --bt-solid-fg: var(--design-on-danger);
  --bt-fill-bg: var(--design-danger-subtle);
  --bt-fill-bg-hover: var(--design-surface-hover);
  --bt-fill-bg-active: var(--design-surface-active);
  --bt-fg: var(--design-danger);
  --bt-border: var(--design-danger-border);
  --bt-border-hover: var(--design-danger);
  --bt-outline-bg-active: var(--design-surface-active);
  --bt-disabled-bg: var(--design-surface-3);
  --bt-disabled-fg: var(--design-text-muted);
  --bt-disabled-border: var(--design-border);
}

html .body-sidebar .standard-sidebar-item:not(.active-sidebar):has(a:not(.section-break)):hover {
  background-color: var(--design-surface-hover);
}

html hr {
  border-top-color: var(--design-border);
}

html .datatable {
  --dt-primary-color: var(--design-primary);
}

html .btn.btn-primary-light {
  background-color: var(--design-surface-active);
  color: var(--design-text);
}

html .btn.btn-primary-light:hover {
  background-color: var(--design-surface-hover);
  color: var(--design-text);
}

html .btn.btn-danger {
  background-color: var(--design-danger);
  color: var(--design-on-danger);
}

html .btn:focus-visible,
html .form-control:focus-visible {
  outline: 2px solid var(--design-focus, var(--design-link));
  outline-offset: 1px;
}