:root {

  --typography-caption-fontFamily: 'Roboto';
  --typography-caption-fontSize: 14px;
  --typography-caption-lineHeight: 18px;
  --typography-caption-fontWeight: 400;

  --typography-text-l-fontFamily: 'Roboto';
  --typography-text-l-fontSize: 18px;
  --typography-text-l-lineHeight: 18px;
  --typography-text-l-fontWeight: 400;

  --typography-text-m-fontFamily: 'Roboto';
  --typography-text-m-fontSize: 16px;
  --typography-text-m-lineHeight: 16px;
  --typography-text-m-fontWeight: 400;

  --typography-text-s-fontFamily: 'Roboto';
  --typography-text-s-fontSize: 14px;
  --typography-text-s-lineHeight: 14px;
  --typography-text-s-fontWeight: 400;

  --typography-h1-fontFamily: 'FreeSet';
  --typography-h1-fontSize: 24px;
  --typography-h1-lineHeight: 26px;
  --typography-h1-fontWeight: 600;

  --typography-h2-fontFamily: 'FreeSet';
  --typography-h2-fontSize: 20px;
  --typography-h2-lineHeight: 22px;
  --typography-h2-fontWeight: 600;

  --typography-h3-fontFamily: 'Roboto';
  --typography-h3-fontSize: 18px;
  --typography-h3-lineHeight: 22px;
  --typography-h3-fontWeight: 500;

  --typography-body-fontFamily: 'Roboto';
  --typography-body-fontSize: 16px;
  --typography-body-lineHeight: 20px;
  --typography-body-fontWeight: 400;

  --shadow-s: 0px 4px 8px rgba(0, 0, 0, 0.25);
  --shadow-m: 0px 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-l: 0px 4px 24px rgba(0, 0, 0, 0.25);

  --spacing-xxl: 48px;
  --spacing-xl: 40px;
  --spacing-l: 32px;
  --spacing-m: 24px;
  --spacing-s: 16px;
  --spacing-xs: 8px;
  --spacing-xxs: 4px;

  --radius-s: 8px;
  --radius-m: 16px;
  --radius-r: 100px;


}