:root,
:root[data-theme="light"] {
  color-scheme: light;

  --xb-color-primary: #6750a4;
  --xb-color-on-primary: #ffffff;
  --xb-color-primary-container: #eaddff;
  --xb-color-on-primary-container: #21005d;
  --xb-color-primary-fixed: #eaddff;
  --xb-color-primary-fixed-dim: #d0bcff;
  --xb-color-on-primary-fixed: #21005d;
  --xb-color-on-primary-fixed-variant: #4f378b;

  --xb-color-secondary: #625b71;
  --xb-color-on-secondary: #ffffff;
  --xb-color-secondary-container: #e8def8;
  --xb-color-on-secondary-container: #1d192b;
  --xb-color-secondary-fixed: #e8def8;
  --xb-color-secondary-fixed-dim: #ccc2dc;
  --xb-color-on-secondary-fixed: #1d192b;
  --xb-color-on-secondary-fixed-variant: #4a4458;

  --xb-color-tertiary: #7d5260;
  --xb-color-on-tertiary: #ffffff;
  --xb-color-tertiary-container: #ffd8e4;
  --xb-color-on-tertiary-container: #31111d;
  --xb-color-tertiary-fixed: #ffd8e4;
  --xb-color-tertiary-fixed-dim: #efb8c8;
  --xb-color-on-tertiary-fixed: #31111d;
  --xb-color-on-tertiary-fixed-variant: #633b48;

  --xb-color-error: #b3261e;
  --xb-color-on-error: #ffffff;
  --xb-color-error-container: #f9dedc;
  --xb-color-on-error-container: #410e0b;

  --xb-color-background: #fffbfe;
  --xb-color-on-background: #1c1b1f;
  --xb-color-surface: #fffbfe;
  --xb-color-on-surface: #1c1b1f;
  --xb-color-surface-variant: #e7e0ec;
  --xb-color-on-surface-variant: #49454f;
  --xb-color-surface-dim: #ded8e1;
  --xb-color-surface-bright: #fffbfe;
  --xb-color-surface-container-lowest: #ffffff;
  --xb-color-surface-container-low: #f7f2fa;
  --xb-color-surface-container: #f3edf7;
  --xb-color-surface-container-high: #ece6f0;
  --xb-color-surface-container-highest: #e6e0e9;
  --xb-color-readonly-surface: #f2f2f2;
  --xb-color-outline: #79747e;
  --xb-color-outline-variant: #cac4d0;
  --xb-color-shadow: #000000;
  --xb-color-scrim: #000000;
  --xb-color-inverse-surface: #313033;
  --xb-color-inverse-on-surface: #f4eff4;
  --xb-color-inverse-primary: #d0bcff;

  --xb-amount-spent: #b3261e;
  --xb-amount-spent-container: #f9dedc;
  --xb-amount-spent-on-container: #410e0b;
  --xb-amount-received: #146c43;
  --xb-amount-received-container: #d7f5df;
  --xb-amount-received-on-container: #052e16;
  --xb-status-info: #0b57d0;
  --xb-status-info-container: #d8e2ff;
  --xb-status-info-on-container: #001a41;

  --xb-state-hover-opacity: 0.08;
  --xb-state-focus-opacity: 0.12;
  --xb-state-pressed-opacity: 0.12;
  --xb-state-dragged-opacity: 0.16;
  --xb-state-selected-opacity: 0.12;
  --xb-state-disabled-content-opacity: 0.38;
  --xb-state-disabled-container-opacity: 0.12;

  --xb-chart-series-1: var(--xb-color-primary);
  --xb-chart-series-2: var(--xb-color-secondary);
  --xb-chart-series-3: var(--xb-color-tertiary);
  --xb-chart-series-4: var(--xb-color-primary-container);
  --xb-chart-series-5: var(--xb-color-secondary-container);
  --xb-chart-series-6: var(--xb-color-tertiary-container);
  --xb-chart-revenue: var(--xb-amount-received);
  --xb-chart-expense: var(--xb-amount-spent);
  --xb-chart-info: var(--xb-status-info);
  --xb-chart-axis: var(--xb-color-outline);
  --xb-chart-grid: var(--xb-color-outline-variant);
  --xb-chart-label: var(--xb-color-on-surface-variant);
  --xb-chart-tooltip-container: var(--xb-color-inverse-surface);
  --xb-chart-tooltip-content: var(--xb-color-inverse-on-surface);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --xb-color-primary: #d0bcff;
  --xb-color-on-primary: #381e72;
  --xb-color-primary-container: #4f378b;
  --xb-color-on-primary-container: #eaddff;
  --xb-color-primary-fixed: #eaddff;
  --xb-color-primary-fixed-dim: #d0bcff;
  --xb-color-on-primary-fixed: #21005d;
  --xb-color-on-primary-fixed-variant: #4f378b;

  --xb-color-secondary: #ccc2dc;
  --xb-color-on-secondary: #332d41;
  --xb-color-secondary-container: #4a4458;
  --xb-color-on-secondary-container: #e8def8;
  --xb-color-secondary-fixed: #e8def8;
  --xb-color-secondary-fixed-dim: #ccc2dc;
  --xb-color-on-secondary-fixed: #1d192b;
  --xb-color-on-secondary-fixed-variant: #4a4458;

  --xb-color-tertiary: #efb8c8;
  --xb-color-on-tertiary: #492532;
  --xb-color-tertiary-container: #633b48;
  --xb-color-on-tertiary-container: #ffd8e4;
  --xb-color-tertiary-fixed: #ffd8e4;
  --xb-color-tertiary-fixed-dim: #efb8c8;
  --xb-color-on-tertiary-fixed: #31111d;
  --xb-color-on-tertiary-fixed-variant: #633b48;

  --xb-color-error: #f2b8b5;
  --xb-color-on-error: #601410;
  --xb-color-error-container: #8c1d18;
  --xb-color-on-error-container: #f9dedc;

  --xb-color-background: #141218;
  --xb-color-on-background: #e6e0e9;
  --xb-color-surface: #141218;
  --xb-color-on-surface: #e6e0e9;
  --xb-color-surface-variant: #49454f;
  --xb-color-on-surface-variant: #cac4d0;
  --xb-color-surface-dim: #141218;
  --xb-color-surface-bright: #3b383e;
  --xb-color-surface-container-lowest: #0f0d13;
  --xb-color-surface-container-low: #1d1b20;
  --xb-color-surface-container: #211f26;
  --xb-color-surface-container-high: #2b2930;
  --xb-color-surface-container-highest: #36343b;
  --xb-color-readonly-surface: #2b2b2b;
  --xb-color-outline: #938f99;
  --xb-color-outline-variant: #49454f;
  --xb-color-shadow: #000000;
  --xb-color-scrim: #000000;
  --xb-color-inverse-surface: #e6e0e9;
  --xb-color-inverse-on-surface: #322f35;
  --xb-color-inverse-primary: #6750a4;

  --xb-amount-spent: #f2b8b5;
  --xb-amount-spent-container: #8c1d18;
  --xb-amount-spent-on-container: #f9dedc;
  --xb-amount-received: #9bd8b0;
  --xb-amount-received-container: #164d2e;
  --xb-amount-received-on-container: #d7f5df;
  --xb-status-info: #adc6ff;
  --xb-status-info-container: #123f7d;
  --xb-status-info-on-container: #d8e2ff;
}