:root {
  --xb-app-background: var(--xb-color-surface-container-lowest);
  --xb-page-background: var(--xb-color-surface-container-lowest);
  --xb-page-title: var(--xb-color-on-surface);
  --xb-page-helper: var(--xb-color-on-surface-variant);

  --xb-sidebar-container: var(--xb-color-surface-container);
  --xb-sidebar-border: var(--xb-color-outline-variant);
  --xb-sidebar-content: var(--xb-color-on-surface-variant);
  --xb-sidebar-active-container: var(--xb-color-secondary-container);
  --xb-sidebar-active-content: var(--xb-color-on-secondary-container);

  --xb-card-container: var(--xb-color-surface-container-low);
  --xb-card-container-emphasis: var(--xb-color-surface-container);
  --xb-card-border: var(--xb-color-outline-variant);
  --xb-card-content: var(--xb-color-on-surface);
  --xb-card-supporting: var(--xb-color-on-surface-variant);
  --xb-card-selected-container: var(--xb-color-secondary-container);
  --xb-card-selected-content: var(--xb-color-on-secondary-container);
  --xb-card-selected-border: var(--xb-color-primary);

  --xb-button-filled-container: var(--xb-color-primary);
  --xb-button-filled-content: var(--xb-color-on-primary);
  --xb-button-filled-hover-container: color-mix(in srgb, var(--xb-color-primary) 92%, var(--xb-color-on-primary));
  --xb-button-tonal-container: var(--xb-color-secondary-container);
  --xb-button-tonal-content: var(--xb-color-on-secondary-container);
  --xb-button-tonal-hover-container: color-mix(in srgb, var(--xb-color-on-secondary-container) 8%, var(--xb-color-secondary-container));
  --xb-button-outlined-container: var(--xb-field-container);
  --xb-button-outlined-content: var(--xb-color-primary);
  --xb-button-outlined-border: var(--xb-color-outline);
  --xb-button-outlined-hover-container: color-mix(in srgb, var(--xb-color-primary) 8%, var(--xb-color-surface));
  --xb-button-text-content: var(--xb-color-primary);
  --xb-button-text-hover-container: color-mix(in srgb, var(--xb-color-primary) 8%, transparent);
  --xb-button-danger-container: var(--xb-color-error);
  --xb-button-danger-content: var(--xb-color-on-error);
  --xb-button-danger-outlined-content: var(--xb-color-error);
  --xb-button-danger-outlined-border: color-mix(in srgb, var(--xb-color-error) 34%, var(--xb-button-outlined-border));
  --xb-button-danger-hover-container: var(--xb-color-error-container);
  --xb-button-danger-hover-content: var(--xb-color-on-error-container);
  --xb-button-disabled-container: color-mix(in srgb, var(--xb-color-on-surface) 8%, var(--xb-color-surface));
  --xb-button-disabled-content: color-mix(in srgb, var(--xb-color-on-surface) 38%, transparent);
  --xb-button-disabled-border: var(--xb-color-outline-variant);
  --xb-icon-button-container: transparent;
  --xb-icon-button-content: var(--xb-color-on-surface-variant);
  --xb-icon-button-hover-container: color-mix(in srgb, var(--xb-color-primary) 8%, transparent);
  --xb-icon-button-hover-content: var(--xb-color-primary);
  --xb-menu-item-hover-container: color-mix(in srgb, var(--xb-color-on-surface) 8%, transparent);

  --xb-field-container: var(--xb-color-surface);
  --xb-field-content: var(--xb-color-on-surface);
  --xb-field-label: var(--xb-color-on-surface-variant);
  --xb-field-border: var(--xb-color-outline);
  --xb-field-focus: var(--xb-color-primary);
  --xb-field-error: var(--xb-color-error);
  --xb-focus-ring: color-mix(in srgb, var(--xb-color-primary) 24%, transparent);

  --xb-checkbox-container: var(--xb-color-surface-container-lowest);
  --xb-checkbox-border: var(--xb-color-outline);
  --xb-checkbox-selected-container: var(--xb-color-primary);
  --xb-checkbox-selected-content: var(--xb-color-on-primary);
  --xb-checkbox-focus-ring: color-mix(in srgb, var(--xb-color-primary) 24%, transparent);

  --xb-tab-container: var(--xb-color-surface-container-lowest);
  --xb-tab-content: var(--xb-color-on-surface-variant);
  --xb-tab-hover-container: var(--xb-color-surface-container);
  --xb-tab-hover-content: var(--xb-color-on-surface);
  --xb-tab-selected-container: var(--xb-color-primary);
  --xb-tab-selected-content: var(--xb-color-on-primary);
  --xb-tab-indicator: var(--xb-color-primary);

  --xb-table-container: var(--xb-color-surface-container-low);
  --xb-table-header-container: var(--xb-color-surface-container);
  --xb-table-header-content: var(--xb-color-on-surface-variant);
  --xb-table-row-container: var(--xb-color-surface);
  --xb-table-row-alt-container: var(--xb-color-surface-container-lowest);
  --xb-table-row-hover-container: color-mix(in srgb, var(--xb-table-row-selected-container) 28%, var(--xb-table-row-container));
  --xb-table-row-selected-container: var(--xb-color-secondary-container);
  --xb-table-row-selected-content: var(--xb-color-on-secondary-container);
  --xb-table-row-candidate-container: var(--xb-color-surface-container);
  --xb-table-row-candidate-content: var(--xb-color-on-surface-variant);
  --xb-table-row-disabled-container: color-mix(in srgb, var(--xb-color-on-surface) 5%, var(--xb-table-row-container));
  --xb-table-row-disabled-content: color-mix(in srgb, var(--xb-color-on-surface) 42%, transparent);
  --xb-table-row-state-indicator: var(--xb-color-primary);
  --xb-table-footer-container: var(--xb-color-surface-container-low);
  --xb-table-footer-content: var(--xb-color-on-surface-variant);
  --xb-table-border: var(--xb-color-outline-variant);
  --xb-table-content: var(--xb-color-on-surface);
  --xb-table-muted-content: var(--xb-color-on-surface-variant);

  --xb-alert-info-container: var(--xb-status-info-container);
  --xb-alert-info-content: var(--xb-status-info-on-container);
  --xb-alert-warning-container: var(--xb-color-tertiary-container);
  --xb-alert-warning-content: var(--xb-color-on-tertiary-container);
  --xb-alert-error-container: var(--xb-color-error-container);
  --xb-alert-error-content: var(--xb-color-on-error-container);
  --xb-alert-complete-container: var(--xb-amount-received-container);
  --xb-alert-complete-content: var(--xb-amount-received);

  --xb-badge-complete-container: var(--xb-amount-received-container);
  --xb-badge-complete-content: var(--xb-amount-received);
  --xb-badge-pending-container: var(--xb-status-info-container);
  --xb-badge-pending-content: var(--xb-status-info);
  --xb-badge-review-container: var(--xb-color-primary-container);
  --xb-badge-review-content: var(--xb-color-on-primary-container);
  --xb-badge-rule-container: var(--xb-color-secondary-container);
  --xb-badge-rule-content: var(--xb-color-on-secondary-container);
  --xb-badge-ai-container: var(--xb-color-tertiary-container);
  --xb-badge-ai-content: var(--xb-color-on-tertiary-container);
  --xb-badge-warning-container: var(--xb-color-tertiary-container);
  --xb-badge-warning-content: var(--xb-color-on-tertiary-container);
  --xb-badge-error-container: var(--xb-color-error-container);
  --xb-badge-error-content: var(--xb-color-on-error-container);
  --xb-badge-info-container: var(--xb-status-info-container);
  --xb-badge-info-content: var(--xb-status-info);
  --xb-badge-accent-container: #b8e8ea;
  --xb-badge-accent-content: #073234;
  --xb-badge-source-container: var(--xb-color-surface-container);
  --xb-badge-source-content: var(--xb-color-on-surface-variant);
  --xb-badge-neutral-container: var(--xb-color-surface-container);
  --xb-badge-neutral-content: var(--xb-color-on-surface-variant);

  --xb-dialog-scrim: var(--xb-color-scrim);
  --xb-dialog-container: var(--xb-color-surface-container-high);
  --xb-menu-container: var(--xb-color-surface-container-high);
  --xb-drawer-container: var(--xb-color-surface-container);
}

:root[data-theme="dark"] {
  --xb-badge-accent-container: #215d5f;
  --xb-badge-accent-content: #b8e8ea;
}