:root {
  --single-line-body-base-font-family: "Inter", Helvetica;
  --single-line-body-base-font-weight: 400;
  --single-line-body-base-font-size: 16px;
  --single-line-body-base-letter-spacing: 0px;
  --single-line-body-base-line-height: 100%;
  --single-line-body-base-font-style: normal;
  --body-base-bold-font-family: "Inter", Helvetica;
  --body-base-bold-font-weight: 700;
  --body-base-bold-font-size: 16px;
  --body-base-bold-letter-spacing: 0px;
  --body-base-bold-line-height: 139.9999976158142%;
  --body-base-bold-font-style: normal;
  --body-small-font-family: "Inter", Helvetica;
  --body-small-font-weight: 400;
  --body-small-font-size: 14px;
  --body-small-letter-spacing: 0px;
  --body-small-line-height: 139.9999976158142%;
  --body-small-font-style: normal;
  --body-strong-font-family: "Inter", Helvetica;
  --body-strong-font-weight: 600;
  --body-strong-font-size: 16px;
  --body-strong-letter-spacing: 0px;
  --body-strong-line-height: 139.9999976158142%;
  --body-strong-font-style: normal;
  --body-base-font-family: "Inter", Helvetica;
  --body-base-font-weight: 400;
  --body-base-font-size: 16px;
  --body-base-letter-spacing: 0px;
  --body-base-line-height: 139.9999976158142%;
  --body-base-font-style: normal;
  --subtitle-font-family: "Inter", Helvetica;
  --subtitle-font-weight: 400;
  --subtitle-font-size: 32px;
  --subtitle-letter-spacing: 0px;
  --subtitle-line-height: 120.00000476837158%;
  --subtitle-font-style: normal;
  --subheading-font-family: "Inter", Helvetica;
  --subheading-font-weight: 400;
  --subheading-font-size: 20px;
  --subheading-letter-spacing: 0px;
  --subheading-line-height: 120.00000476837158%;
  --subheading-font-style: normal;
  --heading-font-family: "Inter", Helvetica;
  --heading-font-weight: 600;
  --heading-font-size: 24px;
  --heading-letter-spacing: -0.48px;
  --heading-line-height: 120.00000476837158%;
  --heading-font-style: normal;
  --system-colors-miscellaneous-floating-tab-text-selected: var(--system-colors-colors-blue);
  --system-colors-miscellaneous-floating-tab-text-unselected: rgba(0, 0, 0, 1);
  --system-colors-colors-blue: rgba(0, 122, 255, 1);
  --system-colors-miscellaneous-floating-tab-pill-fill: rgba(255, 255, 255, 1);
  --color-text-brand-on-brand: var(--color-primitives-brand-100);
  --color-text-default-default: var(--color-primitives-gray-900);
  --color-text-neutral-default: var(--color-primitives-slate-900);
  --color-background-danger-secondary: var(--color-primitives-red-200);
  --color-background-brand-default: var(--color-primitives-brand-800);
  --color-background-neutral-tertiary: var(--color-primitives-slate-200);
  --color-background-default-secondary: var(--color-primitives-gray-100);
  --color-background-warning-tertiary-hover: var(--color-primitives-yellow-200);
  --color-border-neutral-secondary: var(--color-primitives-slate-600);
  --color-border-default-default: var(--color-primitives-gray-300);
  --color-border-danger-tertiary: var(--color-primitives-red-500);
  --color-border-brand-default: var(--color-primitives-brand-800);
  --color-background-default-default: var(--color-primitives-white-1000);
  --color-text-default-secondary: var(--color-primitives-gray-500);
  --color-background-brand-hover: var(--color-primitives-brand-900);
  --color-background-neutral-tertiary-hover: var(--color-primitives-slate-300);
  --color-background-default-default-hover: var(--color-primitives-gray-100);
  --colors-black-100: rgba(0, 0, 0, 1);
  --color-primitives-brand-100: rgba(245, 245, 245, 1);
  --color-primitives-gray-900: rgba(30, 30, 30, 1);
  --color-primitives-slate-900: rgba(48, 48, 48, 1);
  --color-primitives-white-1000: rgba(255, 255, 255, 1);
  --color-primitives-slate-200: rgba(227, 227, 227, 1);
  --color-primitives-brand-900: rgba(30, 30, 30, 1);
  --color-primitives-red-200: rgba(253, 211, 208, 1);
  --color-primitives-brand-800: rgba(44, 44, 44, 1);
  --color-primitives-gray-100: rgba(245, 245, 245, 1);
  --color-primitives-yellow-200: rgba(255, 241, 194, 1);
  --color-primitives-slate-600: rgba(118, 118, 118, 1);
  --color-primitives-gray-300: rgba(217, 217, 217, 1);
  --color-primitives-gray-800: rgba(44, 44, 44, 1);
  --color-primitives-red-500: rgba(236, 34, 31, 1);
  --color-primitives-gray-600: rgba(68, 68, 68, 1);
  --color-primitives-red-800: rgba(105, 8, 7, 1);
  --color-primitives-slate-500: rgba(148, 148, 148, 1);
  --color-primitives-yellow-1000: rgba(64, 27, 1, 1);
  --color-primitives-gray-500: rgba(117, 117, 117, 1);
  --color-primitives-white-500: rgba(255, 255, 255, 0.7);
  --color-primitives-slate-300: rgba(205, 205, 205, 1);
  --color-primitives-brand-300: rgba(217, 217, 217, 1);
  --color-primitives-slate-1000: rgba(36, 36, 36, 1);
  --color-primitives-gray-700: rgba(56, 56, 56, 1);
  --size-space-300: 12px;
  --size-space-200: 8px;
  --size-radius-200: 8px;
  --size-padding-lg: 16px;
  --size-space-400: 16px;
  --size-space-1600: 64px;
}

/*

To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so:

<body data-system-colors-mode="light">
    <!-- the rest of your content -->
</body>

You can apply the theme on any DOM node, not just the `body`

*/

[data-system-colors-mode="light"] {
  --system-colors-miscellaneous-floating-tab-text-selected: var(--system-colors-colors-blue);
  --system-colors-miscellaneous-floating-tab-text-unselected: rgba(0, 0, 0, 1);
  --system-colors-colors-blue: rgba(0, 122, 255, 1);
  --system-colors-miscellaneous-floating-tab-pill-fill: rgba(255, 255, 255, 1);
}

[data-system-colors-mode="dark"] {
  --system-colors-miscellaneous-floating-tab-text-selected: rgba(255, 255, 255, 1);
  --system-colors-miscellaneous-floating-tab-text-unselected: rgba(255, 255, 255, 0.4);
  --system-colors-colors-blue: rgba(10, 132, 255, 1);
  --system-colors-miscellaneous-floating-tab-pill-fill: rgba(255, 255, 255, 0.07);
}

[data-system-colors-mode="dark-elevated"] {
  --system-colors-miscellaneous-floating-tab-text-selected: rgba(255, 255, 255, 1);
  --system-colors-miscellaneous-floating-tab-text-unselected: rgba(255, 255, 255, 0.4);
  --system-colors-colors-blue: rgba(10, 132, 255, 1);
  --system-colors-miscellaneous-floating-tab-pill-fill: rgba(255, 255, 255, 0.07);
}

[data-color-mode="SDS-light"] {
  --color-text-brand-on-brand: var(--color-primitives-brand-100);
  --color-text-default-default: var(--color-primitives-gray-900);
  --color-text-neutral-default: var(--color-primitives-slate-900);
  --color-background-danger-secondary: var(--color-primitives-red-200);
  --color-background-brand-default: var(--color-primitives-brand-800);
  --color-background-neutral-tertiary: var(--color-primitives-slate-200);
  --color-background-default-secondary: var(--color-primitives-gray-100);
  --color-background-warning-tertiary-hover: var(--color-primitives-yellow-200);
  --color-border-neutral-secondary: var(--color-primitives-slate-600);
  --color-border-default-default: var(--color-primitives-gray-300);
  --color-border-brand-default: var(--color-primitives-brand-800);
  --color-background-default-default: var(--color-primitives-white-1000);
  --color-text-default-secondary: var(--color-primitives-gray-500);
  --color-background-brand-hover: var(--color-primitives-brand-900);
  --color-background-neutral-tertiary-hover: var(--color-primitives-slate-300);
  --color-background-default-default-hover: var(--color-primitives-gray-100);
}

[data-color-mode="SDS-dark"] {
  --color-text-brand-on-brand: var(--color-primitives-brand-900);
  --color-text-default-default: var(--color-primitives-white-1000);
  --color-text-neutral-default: var(--color-primitives-slate-200);
  --color-background-danger-secondary: var(--color-primitives-red-800);
  --color-background-brand-default: var(--color-primitives-brand-100);
  --color-background-neutral-tertiary: var(--color-primitives-slate-900);
  --color-background-default-secondary: var(--color-primitives-gray-800);
  --color-background-warning-tertiary-hover: var(--color-primitives-yellow-1000);
  --color-border-neutral-secondary: var(--color-primitives-slate-500);
  --color-border-default-default: var(--color-primitives-gray-600);
  --color-border-brand-default: var(--color-primitives-brand-100);
  --color-background-default-default: var(--color-primitives-gray-900);
  --color-text-default-secondary: var(--color-primitives-white-500);
  --color-background-brand-hover: var(--color-primitives-brand-300);
  --color-background-neutral-tertiary-hover: var(--color-primitives-slate-1000);
  --color-background-default-default-hover: var(--color-primitives-gray-700);
}