html[data-theme="dark"] {
  color-scheme: dark;
  --aguacol-bg-app: #030326;
  --aguacol-bg-surface: #0b0b3d;
  --aguacol-bg-elevated: #111149;
  --aguacol-bg-navigation: #05053c;
  --aguacol-bg-card: #0d0d42;
  --aguacol-bg-field: #15154d;
  --aguacol-bg-subtle: #171750;
  --aguacol-text-primary: #f5f7ff;
  --aguacol-text-secondary: #bdc7dd;
  --aguacol-text-disabled: #7d88a4;
  --aguacol-border: #323263;
  --aguacol-divider: #262657;
  --aguacol-action-primary: #25aef7;
  --aguacol-action-primary-hover: #56c5ff;
  --aguacol-action-secondary: #142b68;
  --aguacol-action-destructive: #ff766e;
  --aguacol-focus: #55d6ff;
  --aguacol-selection: #174d75;
  --aguacol-success: #8bdc3d;
  --aguacol-warning: #ffc857;
  --aguacol-error: #ff817a;
  --aguacol-info: #62d3ff;
  --aguacol-overlay: rgb(0 0 18 / 76%);
  --aguacol-shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
  --aguacol-shadow-md: 0 8px 24px rgb(0 0 0 / 36%);
  --aguacol-shadow-lg: 0 20px 48px rgb(0 0 0 / 46%);

  --bg-color: var(--aguacol-bg-app);
  --fg-color: var(--aguacol-bg-surface);
  --card-bg: var(--aguacol-bg-card);
  --subtle-fg: var(--aguacol-bg-subtle);
  --control-bg: var(--aguacol-bg-field);
  --text-color: var(--aguacol-text-primary);
  --text-muted: var(--aguacol-text-secondary);
  --heading-color: var(--aguacol-text-primary);
  --navbar-bg: var(--aguacol-bg-navigation);
  --modal-bg: var(--aguacol-bg-elevated);
  --toast-bg: var(--aguacol-bg-elevated);
  --popover-bg: var(--aguacol-bg-elevated);
  --fg-hover-color: var(--aguacol-bg-subtle);
  --sidebar-select-color: var(--aguacol-action-secondary);
  --border-color: var(--aguacol-border);
  --dark-border-color: #454578;
  --table-border-color: var(--aguacol-divider);
  --primary: var(--aguacol-action-primary);
  --primary-color: var(--aguacol-action-primary);
  --primary-action: var(--aguacol-action-primary);
  --disabled-text-color: var(--aguacol-text-disabled);
  --btn-primary: var(--aguacol-action-primary);
  --btn-default-bg: var(--aguacol-bg-field);
  --btn-default-hover-bg: #20205c;
  --btn-ghost-hover-bg: var(--aguacol-bg-subtle);
  --surface-white: var(--aguacol-bg-surface);
  --surface-gray-1: var(--aguacol-bg-subtle);
  --surface-gray-2: #20205c;
  --surface-gray-3: #292965;
  --surface-gray-7: #dbe3f7;
  --ink-gray-4: var(--aguacol-text-disabled);
  --ink-gray-5: #9eabc5;
  --ink-gray-6: var(--aguacol-text-secondary);
  --ink-gray-7: #dfe6f7;
  --ink-gray-8: var(--aguacol-text-primary);
  --blue-500: var(--aguacol-action-primary);
  --blue-600: var(--aguacol-action-primary-hover);
  --green-500: var(--aguacol-success);
  --red-500: var(--aguacol-error);
  --yellow-500: var(--aguacol-warning);
}