:root {
  /* Font family and weights */
  --font-family: "Plus Jakarta Sans", sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Display scale */
  --type-display-2xl-size: 90px;
  --type-display-2xl-line: 100px;
  --type-display-2xl-spacing: -0.5px;
  --type-display-xl-size: 55px;
  --type-display-xl-line: 72px;
  --type-display-xl-spacing: -0.5px;
  --type-display-lg-size: 48px;
  --type-display-lg-line: 60px;
  --type-display-lg-spacing: 0;
  --type-display-md-size: 34px;
  --type-display-md-line: 42px;
  --type-display-md-spacing: 0.25px;
  --type-display-sm-size: 24px;
  --type-display-sm-line: 30px;
  --type-display-sm-spacing: 0;
  --type-display-xs-size: 20px;
  --type-display-xs-line: 25px;
  --type-display-xs-spacing: 0.15px;

  /* Text scale */
  --type-text-lg-size: 18px;
  --type-text-lg-line: 26px;
  --type-text-lg-spacing: 0.15px;
  --type-text-md-size: 16px;
  --type-text-md-line: 22px;
  --type-text-md-spacing: 0.15px;
  --type-text-sm-size: 14px;
  --type-text-sm-line: 20px;
  --type-text-sm-spacing: 0.15px;
  --type-text-xs-size: 12px;
  --type-text-xs-line: 16px;
  --type-text-xs-spacing: 0.25px;
  --type-tooltip-size: 10px;
  --type-tooltip-line: 14px;
  --type-tooltip-spacing: 0;

  /* Button scale */
  --type-button-sm-size: 13px;
  --type-button-sm-line: 18px;
  --type-button-md-size: 14px;
  --type-button-md-line: 20px;
  --type-button-lg-size: 15px;
  --type-button-lg-line: 20px;
  --type-button-spacing: 0.25px;
}

.type-display-2xl,
.type-display-xl,
.type-display-lg,
.type-display-md,
.type-display-sm,
.type-display-xs,
.type-text-lg,
.type-text-md,
.type-text-sm,
.type-text-xs,
.type-tooltip,
.type-button-sm,
.type-button-md,
.type-button-lg {
  margin: 0;
  font-family: var(--font-family);
}

.type-display-2xl { font-size: var(--type-display-2xl-size); line-height: var(--type-display-2xl-line); letter-spacing: var(--type-display-2xl-spacing); }
.type-display-xl { font-size: var(--type-display-xl-size); line-height: var(--type-display-xl-line); letter-spacing: var(--type-display-xl-spacing); }
.type-display-lg { font-size: var(--type-display-lg-size); line-height: var(--type-display-lg-line); letter-spacing: var(--type-display-lg-spacing); }
.type-display-md { font-size: var(--type-display-md-size); line-height: var(--type-display-md-line); letter-spacing: var(--type-display-md-spacing); }
.type-display-sm { font-size: var(--type-display-sm-size); line-height: var(--type-display-sm-line); letter-spacing: var(--type-display-sm-spacing); }
.type-display-xs { font-size: var(--type-display-xs-size); line-height: var(--type-display-xs-line); letter-spacing: var(--type-display-xs-spacing); }
.type-text-lg { font-size: var(--type-text-lg-size); line-height: var(--type-text-lg-line); letter-spacing: var(--type-text-lg-spacing); }
.type-text-md { font-size: var(--type-text-md-size); line-height: var(--type-text-md-line); letter-spacing: var(--type-text-md-spacing); }
.type-text-sm { font-size: var(--type-text-sm-size); line-height: var(--type-text-sm-line); letter-spacing: var(--type-text-sm-spacing); }
.type-text-xs { font-size: var(--type-text-xs-size); line-height: var(--type-text-xs-line); letter-spacing: var(--type-text-xs-spacing); }
.type-tooltip { font-size: var(--type-tooltip-size); line-height: var(--type-tooltip-line); letter-spacing: var(--type-tooltip-spacing); font-weight: var(--font-weight-medium); }
.type-button-sm { font-size: var(--type-button-sm-size); line-height: var(--type-button-sm-line); letter-spacing: var(--type-button-spacing); font-weight: var(--font-weight-medium); }
.type-button-md { font-size: var(--type-button-md-size); line-height: var(--type-button-md-line); letter-spacing: var(--type-button-spacing); font-weight: var(--font-weight-medium); }
.type-button-lg { font-size: var(--type-button-lg-size); line-height: var(--type-button-lg-line); letter-spacing: var(--type-button-spacing); font-weight: var(--font-weight-medium); }

.font-light { font-weight: var(--font-weight-light); }
.font-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }