:root {
  --container-width: 1280px;

  --screen-xsmall: 0;
  --screen-small: 600px;
  --screen-medium: 768px;
  --screen-large: 1024px;
  --screen-xlarge: 1280px;

  --font-family-space-grotesk: Space Grotesk, Helvetica, Arial, 'sans-serif',
    'ui-sans-serif', 'system-ui';
  --font-family-inter: Inter, Asap, 'sans-serif', 'ui-sans-serif', 'system-ui';
  --font-family-jetbrains: JetBrains, ui-monospace, 'Cascadia Mono',
    'Segoe UI Mono';

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --unitless-line-height: 1.15;

  --size-1: 12px;
  --size-2: 14px;
  --size-3: 16px;
  --size-4: 18px;
  --size-5: 20px;
  --size-6: 24px;
  --size-7: 32px;
  --size-8: 40px;
  --size-9: 48px;
  --size-10: 56px;
  --size-11: 64px;

  --space-0: 0;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --space-9: 72px;
  --space-10: 80px;
  --space-0-25: 2px;
  --space-0-5: 4px;
  --space-1-5: 12px;

  --typography-HeadingLarge-font-family: var(--font-family-space-grotesk);
  --typography-HeadingLarge-font-weight: var(--font-weight-bold);
  --typography-HeadingLarge-font-size: var(--size-7);
  --typography-HeadingLarge-line-height: var(--unitless-line-height, 64px);

  @media (min-width: 600px) {
    --typography-HeadingLarge-font-size: var(--size-8);
  }

  @media (min-width: 1024px) {
    --typography-HeadingLarge-font-size: var(--size-10);
  }

  --typography-Heading-font-family: var(--font-family-space-grotesk);
  --typography-Heading-font-size: var(--size-8);
  --typography-Heading-font-weight: var(--font-weight-bold);
  --typography-Heading-line-height: var(--unitless-line-height, 48px);

  --typography-HeadingSmall-font-family: var(--font-family-space-grotesk);
  --typography-HeadingSmall-font-size: var(--size-7);
  --typography-HeadingSmall-font-weight: var(--font-weight-bold);
  --typography-HeadingSmall-line-height: var(--unitless-line-height, 40px);

  --typography-Headline-font-family: var(--font-family-inter);
  --typography-Headline-font-size: var(--size-7);
  --typography-Headline-font-weight: var(--font-weight-normal);
  --typography-Headline-line-height: var(--unitless-line-height, 40px);

  --typography-Title-font-family: var(--font-family-space-grotesk);
  --typography-Title-font-size: var(--size-6);
  --typography-Title-font-weight: var(--font-weight-bold);
  --typography-Title-line-height: var(--unitless-line-height, 32px);

  @media (min-width: 600px) {
    --typography-Title-font-size: var(--size-7);
  }

  --typography-Body-font-family: var(--font-family-inter);
  --typography-Body-font-size: var(--size-3);
  --typography-Body-font-weight: var(--font-weight-normal);
  --typography-Body-line-height: var(--unitless-line-height, 24px);

  --typography-BodyStrong-font-family: var(--font-family-inter);
  --typography-BodyStrong-font-size: var(--size-3);
  --typography-BodyStrong-font-weight: var(--font-weight-bold);
  --typography-BodyStrong-line-height: var(--unitless-line-height, 24px);

  --typography-BodySmall-font-family: var(--font-family-inter);
  --typography-BodySmall-font-size: var(--size-2);
  --typography-BodySmall-font-weight: var(--font-weight-normal);
  --typography-BodySmall-line-height: var(--unitless-line-height, 22px);

  --typography-BodySmallStrong-font-family: var(--font-family-inter);
  --typography-BodySmallStrong-font-size: var(--size-2);
  --typography-BodySmallStrong-font-weight: var(--font-weight-bold);
  --typography-BodySmallStrong-line-height: var(--unitless-line-height, 22px);

  --typography-BodyXSmall-font-family: var(--font-family-inter);
  --typography-BodyXSmall-font-size: var(--size-1);
  --typography-BodyXSmall-font-weight: var(--font-weight-normal);
  --typography-BodyXSmall-line-height: var(--unitless-line-height, 20px);

  --typography-BodyXSmallStrong-font-family: var(--font-family-inter);
  --typography-BodyXSmallStrong-font-size: var(--size-1);
  --typography-BodyXSmallStrong-font-weight: var(--font-weight-bold);
  --typography-BodyXSmallStrong-line-height: var(--unitless-line-height, 20px);

  --color-Darker: #110B1E;
  --color-PrimaryLight: #f1eefc;
  --color-Primary: #8c40ef;
  --color-PrimaryStrong: #792dd4;
  --color-PrimaryStronger: #641cb3;
  --color-White: #ffffff;
  --color-NeutralLight: #f9f9fa;
  --color-NeutralGrey: #d9dadd;
  --color-NeutralWeak: #727683;
  --color-Neutral: #3f4250;
  --color-NeutralStrong: #222638;
  --color-WarningBackground: #fff6e6;
  --color-WarningText: #7c5400;
  --color-SuccessBackground: #daf6ec;
  --color-SuccessText: #22674e;
  --color-InfoBackground: #e0f2ff;
  --color-InfoText: #005da3;
  --color-DangerBackground: #ffebf2;
  --color-DangerText: #b3144d;

  --radii-circle: 100%;
  --radii-default: 4px;
  --radii-large: 8px;
  --radii-none: 0;
  --radii-small: 2px;
  --radii-xlarge: 16px;
  --radii-xxlarge: 32px;
}