@theme {
  --font-sans: var(--ds-font-family);
  --radius-lg: var(--ds-border-radius-lg);
  --radius-md: var(--ds-border-radius-md);
  --radius-sm: var(--ds-border-radius-sm);
  --radius-xl: var(--ds-border-radius-xl);
  --color-accent-background-default: var(--ds-color-accent-background-default);
  --color-accent-background-tinted: var(--ds-color-accent-background-tinted);
  --color-accent-base-active: var(--ds-color-accent-base-active);
  --color-accent-base-contrast-default: var(--ds-color-accent-base-contrast-default);
  --color-accent-base-contrast-subtle: var(--ds-color-accent-base-contrast-subtle);
  --color-accent-base-default: var(--ds-color-accent-base-default);
  --color-accent-base-hover: var(--ds-color-accent-base-hover);
  --color-accent-border-default: var(--ds-color-accent-border-default);
  --color-accent-border-strong: var(--ds-color-accent-border-strong);
  --color-accent-border-subtle: var(--ds-color-accent-border-subtle);
  --color-accent-complementary-default: var(--ds-color-accent-complementary-default);
  --color-accent-surface-active: var(--ds-color-accent-surface-active);
  --color-accent-surface-default: var(--ds-color-accent-surface-default);
  --color-accent-surface-hover: var(--ds-color-accent-surface-hover);
  --color-accent-surface-tinted: var(--ds-color-accent-surface-tinted);
  --color-accent-text-default: var(--ds-color-accent-text-default);
  --color-accent-text-subtle: var(--ds-color-accent-text-subtle);
  --color-background-default: var(--ds-color-background-default);
  --color-background-tinted: var(--ds-color-background-tinted);
  --color-base-active: var(--ds-color-base-active);
  --color-base-contrast-default: var(--ds-color-base-contrast-default);
  --color-base-contrast-subtle: var(--ds-color-base-contrast-subtle);
  --color-base-default: var(--ds-color-base-default);
  --color-base-hover: var(--ds-color-base-hover);
  --color-border-default: var(--ds-color-border-default);
  --color-border-strong: var(--ds-color-border-strong);
  --color-border-subtle: var(--ds-color-border-subtle);
  --color-brand1-background-default: var(--ds-color-brand1-background-default);
  --color-brand1-background-tinted: var(--ds-color-brand1-background-tinted);
  --color-brand1-base-active: var(--ds-color-brand1-base-active);
  --color-brand1-base-contrast-default: var(--ds-color-brand1-base-contrast-default);
  --color-brand1-base-contrast-subtle: var(--ds-color-brand1-base-contrast-subtle);
  --color-brand1-base-default: var(--ds-color-brand1-base-default);
  --color-brand1-base-hover: var(--ds-color-brand1-base-hover);
  --color-brand1-border-default: var(--ds-color-brand1-border-default);
  --color-brand1-border-strong: var(--ds-color-brand1-border-strong);
  --color-brand1-border-subtle: var(--ds-color-brand1-border-subtle);
  --color-brand1-complementary-default: var(--ds-color-brand1-complementary-default);
  --color-brand1-complementary-text: var(--ds-color-brand1-complementary-text);
  --color-brand1-header-surface-default: var(--ds-color-brand1-header-surface-default);
  --color-brand1-icon-on-bounding: var(--ds-color-brand1-icon-on-bounding);
  --color-brand1-surface-active: var(--ds-color-brand1-surface-active);
  --color-brand1-surface-default: var(--ds-color-brand1-surface-default);
  --color-brand1-surface-hover: var(--ds-color-brand1-surface-hover);
  --color-brand1-surface-tinted: var(--ds-color-brand1-surface-tinted);
  --color-brand1-text-default: var(--ds-color-brand1-text-default);
  --color-brand1-text-subtle: var(--ds-color-brand1-text-subtle);
  --color-brand2-background-default: var(--ds-color-brand2-background-default);
  --color-brand2-background-tinted: var(--ds-color-brand2-background-tinted);
  --color-brand2-base-active: var(--ds-color-brand2-base-active);
  --color-brand2-base-contrast-default: var(--ds-color-brand2-base-contrast-default);
  --color-brand2-base-contrast-subtle: var(--ds-color-brand2-base-contrast-subtle);
  --color-brand2-base-default: var(--ds-color-brand2-base-default);
  --color-brand2-base-hover: var(--ds-color-brand2-base-hover);
  --color-brand2-border-default: var(--ds-color-brand2-border-default);
  --color-brand2-border-strong: var(--ds-color-brand2-border-strong);
  --color-brand2-border-subtle: var(--ds-color-brand2-border-subtle);
  --color-brand2-complementary-default: var(--ds-color-brand2-complementary-default);
  --color-brand2-complementary-text: var(--ds-color-brand2-complementary-text);
  --color-brand2-header-surface-default: var(--ds-color-brand2-header-surface-default);
  --color-brand2-icon-on-bounding: var(--ds-color-brand2-icon-on-bounding);
  --color-brand2-surface-active: var(--ds-color-brand2-surface-active);
  --color-brand2-surface-default: var(--ds-color-brand2-surface-default);
  --color-brand2-surface-hover: var(--ds-color-brand2-surface-hover);
  --color-brand2-surface-tinted: var(--ds-color-brand2-surface-tinted);
  --color-brand2-text-default: var(--ds-color-brand2-text-default);
  --color-brand2-text-subtle: var(--ds-color-brand2-text-subtle);
  --color-brand3-background-default: var(--ds-color-brand3-background-default);
  --color-brand3-background-tinted: var(--ds-color-brand3-background-tinted);
  --color-brand3-base-active: var(--ds-color-brand3-base-active);
  --color-brand3-base-contrast-default: var(--ds-color-brand3-base-contrast-default);
  --color-brand3-base-contrast-subtle: var(--ds-color-brand3-base-contrast-subtle);
  --color-brand3-base-default: var(--ds-color-brand3-base-default);
  --color-brand3-base-hover: var(--ds-color-brand3-base-hover);
  --color-brand3-border-default: var(--ds-color-brand3-border-default);
  --color-brand3-border-strong: var(--ds-color-brand3-border-strong);
  --color-brand3-border-subtle: var(--ds-color-brand3-border-subtle);
  --color-brand3-complementary-default: var(--ds-color-brand3-complementary-default);
  --color-brand3-complementary-text: var(--ds-color-brand3-complementary-text);
  --color-brand3-header-surface-default: var(--ds-color-brand3-header-surface-default);
  --color-brand3-icon-on-bounding: var(--ds-color-brand3-icon-on-bounding);
  --color-brand3-surface-active: var(--ds-color-brand3-surface-active);
  --color-brand3-surface-default: var(--ds-color-brand3-surface-default);
  --color-brand3-surface-hover: var(--ds-color-brand3-surface-hover);
  --color-brand3-surface-tinted: var(--ds-color-brand3-surface-tinted);
  --color-brand3-text-default: var(--ds-color-brand3-text-default);
  --color-brand3-text-subtle: var(--ds-color-brand3-text-subtle);
  --color-brand4-background-default: var(--ds-color-brand4-background-default);
  --color-brand4-background-tinted: var(--ds-color-brand4-background-tinted);
  --color-brand4-base-active: var(--ds-color-brand4-base-active);
  --color-brand4-base-contrast-default: var(--ds-color-brand4-base-contrast-default);
  --color-brand4-base-contrast-subtle: var(--ds-color-brand4-base-contrast-subtle);
  --color-brand4-base-default: var(--ds-color-brand4-base-default);
  --color-brand4-base-hover: var(--ds-color-brand4-base-hover);
  --color-brand4-border-default: var(--ds-color-brand4-border-default);
  --color-brand4-border-strong: var(--ds-color-brand4-border-strong);
  --color-brand4-border-subtle: var(--ds-color-brand4-border-subtle);
  --color-brand4-complementary-default: var(--ds-color-brand4-complementary-default);
  --color-brand4-complementary-text: var(--ds-color-brand4-complementary-text);
  --color-brand4-header-surface-default: var(--ds-color-brand4-header-surface-default);
  --color-brand4-icon-on-bounding: var(--ds-color-brand4-icon-on-bounding);
  --color-brand4-surface-active: var(--ds-color-brand4-surface-active);
  --color-brand4-surface-default: var(--ds-color-brand4-surface-default);
  --color-brand4-surface-hover: var(--ds-color-brand4-surface-hover);
  --color-brand4-surface-tinted: var(--ds-color-brand4-surface-tinted);
  --color-brand4-text-default: var(--ds-color-brand4-text-default);
  --color-brand4-text-subtle: var(--ds-color-brand4-text-subtle);
  --color-complementary-default: var(--ds-color-complementary-default);
  --color-complementary-text: var(--ds-color-complementary-text);
  --color-danger-background-default: var(--ds-color-danger-background-default);
  --color-danger-background-tinted: var(--ds-color-danger-background-tinted);
  --color-danger-base-active: var(--ds-color-danger-base-active);
  --color-danger-base-contrast-default: var(--ds-color-danger-base-contrast-default);
  --color-danger-base-contrast-subtle: var(--ds-color-danger-base-contrast-subtle);
  --color-danger-base-default: var(--ds-color-danger-base-default);
  --color-danger-base-hover: var(--ds-color-danger-base-hover);
  --color-danger-border-default: var(--ds-color-danger-border-default);
  --color-danger-border-strong: var(--ds-color-danger-border-strong);
  --color-danger-border-subtle: var(--ds-color-danger-border-subtle);
  --color-danger-surface-active: var(--ds-color-danger-surface-active);
  --color-danger-surface-default: var(--ds-color-danger-surface-default);
  --color-danger-surface-hover: var(--ds-color-danger-surface-hover);
  --color-danger-surface-tinted: var(--ds-color-danger-surface-tinted);
  --color-danger-text-default: var(--ds-color-danger-text-default);
  --color-danger-text-subtle: var(--ds-color-danger-text-subtle);
  --color-header-surface-default: var(--ds-color-header-surface-default);
  --color-icon-on-bounding: var(--ds-color-icon-on-bounding);
  --color-info-background-default: var(--ds-color-info-background-default);
  --color-info-background-tinted: var(--ds-color-info-background-tinted);
  --color-info-base-active: var(--ds-color-info-base-active);
  --color-info-base-contrast-default: var(--ds-color-info-base-contrast-default);
  --color-info-base-contrast-subtle: var(--ds-color-info-base-contrast-subtle);
  --color-info-base-default: var(--ds-color-info-base-default);
  --color-info-base-hover: var(--ds-color-info-base-hover);
  --color-info-border-default: var(--ds-color-info-border-default);
  --color-info-border-strong: var(--ds-color-info-border-strong);
  --color-info-border-subtle: var(--ds-color-info-border-subtle);
  --color-info-surface-active: var(--ds-color-info-surface-active);
  --color-info-surface-default: var(--ds-color-info-surface-default);
  --color-info-surface-hover: var(--ds-color-info-surface-hover);
  --color-info-surface-tinted: var(--ds-color-info-surface-tinted);
  --color-info-text-default: var(--ds-color-info-text-default);
  --color-info-text-subtle: var(--ds-color-info-text-subtle);
  --color-neutral-background-default: var(--ds-color-neutral-background-default);
  --color-neutral-background-tinted: var(--ds-color-neutral-background-tinted);
  --color-neutral-base-active: var(--ds-color-neutral-base-active);
  --color-neutral-base-contrast-default: var(--ds-color-neutral-base-contrast-default);
  --color-neutral-base-contrast-subtle: var(--ds-color-neutral-base-contrast-subtle);
  --color-neutral-base-default: var(--ds-color-neutral-base-default);
  --color-neutral-base-hover: var(--ds-color-neutral-base-hover);
  --color-neutral-border-default: var(--ds-color-neutral-border-default);
  --color-neutral-border-strong: var(--ds-color-neutral-border-strong);
  --color-neutral-border-subtle: var(--ds-color-neutral-border-subtle);
  --color-neutral-surface-active: var(--ds-color-neutral-surface-active);
  --color-neutral-surface-default: var(--ds-color-neutral-surface-default);
  --color-neutral-surface-hover: var(--ds-color-neutral-surface-hover);
  --color-neutral-surface-tinted: var(--ds-color-neutral-surface-tinted);
  --color-neutral-text-default: var(--ds-color-neutral-text-default);
  --color-neutral-text-subtle: var(--ds-color-neutral-text-subtle);
  --color-primary-background-default: var(--ds-color-primary-background-default);
  --color-primary-background-tinted: var(--ds-color-primary-background-tinted);
  --color-primary-base-active: var(--ds-color-primary-base-active);
  --color-primary-base-contrast-default: var(--ds-color-primary-base-contrast-default);
  --color-primary-base-contrast-subtle: var(--ds-color-primary-base-contrast-subtle);
  --color-primary-base-default: var(--ds-color-primary-base-default);
  --color-primary-base-hover: var(--ds-color-primary-base-hover);
  --color-primary-border-default: var(--ds-color-primary-border-default);
  --color-primary-border-strong: var(--ds-color-primary-border-strong);
  --color-primary-border-subtle: var(--ds-color-primary-border-subtle);
  --color-primary-surface-active: var(--ds-color-primary-surface-active);
  --color-primary-surface-default: var(--ds-color-primary-surface-default);
  --color-primary-surface-hover: var(--ds-color-primary-surface-hover);
  --color-primary-surface-tinted: var(--ds-color-primary-surface-tinted);
  --color-primary-text-default: var(--ds-color-primary-text-default);
  --color-primary-text-subtle: var(--ds-color-primary-text-subtle);
  --color-success-background-default: var(--ds-color-success-background-default);
  --color-success-background-tinted: var(--ds-color-success-background-tinted);
  --color-success-base-active: var(--ds-color-success-base-active);
  --color-success-base-contrast-default: var(--ds-color-success-base-contrast-default);
  --color-success-base-contrast-subtle: var(--ds-color-success-base-contrast-subtle);
  --color-success-base-default: var(--ds-color-success-base-default);
  --color-success-base-hover: var(--ds-color-success-base-hover);
  --color-success-border-default: var(--ds-color-success-border-default);
  --color-success-border-strong: var(--ds-color-success-border-strong);
  --color-success-border-subtle: var(--ds-color-success-border-subtle);
  --color-success-surface-active: var(--ds-color-success-surface-active);
  --color-success-surface-default: var(--ds-color-success-surface-default);
  --color-success-surface-hover: var(--ds-color-success-surface-hover);
  --color-success-surface-tinted: var(--ds-color-success-surface-tinted);
  --color-success-text-default: var(--ds-color-success-text-default);
  --color-success-text-subtle: var(--ds-color-success-text-subtle);
  --color-surface-active: var(--ds-color-surface-active);
  --color-surface-default: var(--ds-color-surface-default);
  --color-surface-hover: var(--ds-color-surface-hover);
  --color-surface-tinted: var(--ds-color-surface-tinted);
  --color-text-default: var(--ds-color-text-default);
  --color-text-subtle: var(--ds-color-text-subtle);
  --color-warning-background-default: var(--ds-color-warning-background-default);
  --color-warning-background-tinted: var(--ds-color-warning-background-tinted);
  --color-warning-base-active: var(--ds-color-warning-base-active);
  --color-warning-base-contrast-default: var(--ds-color-warning-base-contrast-default);
  --color-warning-base-contrast-subtle: var(--ds-color-warning-base-contrast-subtle);
  --color-warning-base-default: var(--ds-color-warning-base-default);
  --color-warning-base-hover: var(--ds-color-warning-base-hover);
  --color-warning-border-default: var(--ds-color-warning-border-default);
  --color-warning-border-strong: var(--ds-color-warning-border-strong);
  --color-warning-border-subtle: var(--ds-color-warning-border-subtle);
  --color-warning-surface-active: var(--ds-color-warning-surface-active);
  --color-warning-surface-default: var(--ds-color-warning-surface-default);
  --color-warning-surface-hover: var(--ds-color-warning-surface-hover);
  --color-warning-surface-tinted: var(--ds-color-warning-surface-tinted);
  --color-warning-text-default: var(--ds-color-warning-text-default);
  --color-warning-text-subtle: var(--ds-color-warning-text-subtle);
  --font-weight-bold: var(--ds-font-weight-bold);
  --font-weight-regular: var(--ds-font-weight-regular);
  --font-weight-semibold: var(--ds-font-weight-semibold);
  --spacing-0: var(--ds-size-0);
  --spacing-1: var(--ds-size-1);
  --spacing-2: var(--ds-size-2);
  --spacing-3: var(--ds-size-3);
  --spacing-4: var(--ds-size-4);
  --spacing-5: var(--ds-size-5);
  --spacing-6: var(--ds-size-6);
  --spacing-7: var(--ds-size-7);
  --spacing-8: var(--ds-size-8);
  --spacing-9: var(--ds-size-9);
  --spacing-10: var(--ds-size-10);
  --spacing-11: var(--ds-size-11);
  --spacing-12: var(--ds-size-12);
  --spacing-13: var(--ds-size-13);
  --spacing-14: var(--ds-size-14);
  --spacing-15: var(--ds-size-15);
  --spacing-16: var(--ds-size-16);
  --spacing-17: var(--ds-size-17);
  --spacing-18: var(--ds-size-18);
  --spacing-19: var(--ds-size-19);
  --spacing-20: var(--ds-size-20);
  --spacing-21: var(--ds-size-21);
  --spacing-22: var(--ds-size-22);
  --spacing-26: var(--ds-size-26);
  --spacing-30: var(--ds-size-30);
}
[data-color] {
      --color-background-default: var(--ds-color-background-default);
      --color-background-tinted: var(--ds-color-background-tinted);
      --color-surface-default: var(--ds-color-surface-default);
      --color-surface-tinted: var(--ds-color-surface-tinted);
      --color-surface-hover: var(--ds-color-surface-hover);
      --color-surface-active: var(--ds-color-surface-active);
      --color-border-subtle: var(--ds-color-border-subtle);
      --color-border-default: var(--ds-color-border-default);
      --color-border-strong: var(--ds-color-border-strong);
      --color-text-subtle: var(--ds-color-text-subtle);
      --color-text-default: var(--ds-color-text-default);
      --color-base-default: var(--ds-color-base-default);
      --color-base-hover: var(--ds-color-base-hover);
      --color-base-active: var(--ds-color-base-active);
      --color-base-contrast-subtle: var(--ds-color-base-contrast-subtle);
      --color-base-contrast-default: var(--ds-color-base-contrast-default);
    }