/* Generated from design-tokens.json. Run node generate-tokens.cjs. */
:root {
  --ds-color-brand-950: #241334;
  --ds-color-brand-900: #2c163d;
  --ds-color-brand-800: #39204f;
  --ds-color-brand-700: #47245f;
  --ds-color-bg-page: #fafafa;
  --ds-color-bg-surface: #ffffff;
  --ds-color-bg-subtle: #f5f5f5;
  --ds-color-bg-hover: #f2f2f2;
  --ds-color-bg-selected: #f0f0f0;
  --ds-color-text-primary: #262626;
  --ds-color-text-secondary: #525252;
  --ds-color-text-muted: #666666;
  --ds-color-text-on-brand: #ffffff;
  --ds-color-border-subtle: #dedede;
  --ds-color-border-control: #858585;
  --ds-color-focus: #47245f;
  --ds-color-disabled-bg: #eeeeee;
  --ds-color-disabled-text: #666666;
  --ds-color-success-fg: #226345;
  --ds-color-success-bg: #ffffff;
  --ds-color-success-border: #518366;
  --ds-color-info-fg: #2b527d;
  --ds-color-info-bg: #ffffff;
  --ds-color-info-border: #577da5;
  --ds-color-warning-fg: #785400;
  --ds-color-warning-bg: #ffffff;
  --ds-color-warning-border: #9c7726;
  --ds-color-danger-fg: #912b38;
  --ds-color-danger-bg: #ffffff;
  --ds-color-danger-border: #b44c5b;
  --ds-color-skeleton: #dedede;
  --ds-color-backdrop: rgba(0, 0, 0, .40);
  --ds-font-family-base: "Roboto", Arial, sans-serif;
  --ds-font-size-12: 12px;
  --ds-font-size-14: 14px;
  --ds-font-size-16: 16px;
  --ds-font-size-18: 18px;
  --ds-font-size-24: 24px;
  --ds-font-size-32: 32px;
  --ds-font-size-44: 44px;
  --ds-font-weight-regular: 400;
  --ds-font-weight-medium: 500;
  --ds-font-weight-bold: 700;
  --ds-line-height-body: 1.5;
  --ds-line-height-heading: 1.2;
  --ds-line-height-caption: 1.5;
  --ds-space-4: 4px;
  --ds-space-8: 8px;
  --ds-space-12: 12px;
  --ds-space-16: 16px;
  --ds-space-20: 20px;
  --ds-space-24: 24px;
  --ds-space-32: 32px;
  --ds-space-40: 40px;
  --ds-space-48: 48px;
  --ds-space-64: 64px;
  --ds-radius-control: 4px;
  --ds-radius-small: 4px;
  --ds-radius-card: 4px;
  --ds-radius-round: 999px;
  --ds-border-width: 1px;
  --ds-focus-width: 2px;
  --ds-focus-offset: 4px;
  --ds-control-height: 44px;
  --ds-control-height-large: 52px;
  --ds-tab-height: 48px;
  --ds-tab-height-mobile: 44px;
  --ds-container-max: 940px;
  --ds-avatar-size: 64px;
  --ds-avatar-size-mobile: 48px;
  --ds-progress-height: 4px;
  --ds-shadow-selected: 0 1px 3px rgba(0, 0, 0, .12);
  --ds-shadow-raised: 0 4px 12px rgba(0, 0, 0, .08);
  --ds-motion-duration-fast: 120ms;
  --ds-motion-duration-skeleton: 1400ms;
  --ds-motion-easing: ease-out;
  --ds-color-data-a: #39204f;
  --ds-color-data-b: #8e759e;
  --ds-color-data-c: #ad9aba;
  --ds-color-data-d: #bcb2c8;
  --ds-color-danger-hover: #77222d;
}