:root {
  /* font sizes */
  --font-size-20: 10px;
  --font-size-40: 12px;
  --font-size-60: 13px;
  --font-size-80: 14px;
  --font-size-90: 15px;
  --font-size-100: 16px; /* base */
  --font-size-200: 18px;
  --font-size-300: 20px;
  --font-size-400: 22px;
  --font-size-500: 24px;
  --font-size-600: 28px;
  --font-size-700: 30px;
  --font-size-750: 32px;
  --font-size-800: 36px;
  --font-size-900: 45px;
  --font-size-950: 54px;
  --font-size-1000: 75px;

  /* letter spacing */
  --letter-spacing-m: 0.14em;
  --letter-spacing-s: 0.083em;

  /* font weights */
  --weight-medium: 500;
  --weight-regular: 400;
  --weight-light: 300;

  /* line heights */
  --line-height-xl: 1.63;
  --line-height-l: 1.45;
  --line-height-m: 1.3;
  --line-height-s: 1.2;
  --line-height-xs: 1;

  /* heading sizes */
  --heading-size-xxxxl: var(--font-size-800);
  --heading-size-xxxl: var(--font-size-700);
  --heading-size-xxl: var(--font-size-600); /* h1 */
  --heading-size-xl: var(--font-size-700);  /* h2 */
  --heading-size-l: var(--font-size-400);   /* h3 */
  --heading-size-m: var(--font-size-300);   /* h4 */
  --heading-size-s: var(--font-size-200);   /* h5 */
  --heading-size-xs: var(--font-size-100);  /* h6 */

  /* title sizes */
  --title-size-xxxl: var(--font-size-700);
  --title-size-xxl: var(--font-size-600);
  --title-size-xl: var(--font-size-500);
  --title-size-l: var(--font-size-400);
  --title-size-m: var(--font-size-300);
  --title-size-s: var(--font-size-200);
  --title-size-xs: var(--font-size-100);

  /* body sizes */
  --body-size-xxxl: var(--font-size-500);
  --body-size-xxl: var(--font-size-400);
  --body-size-xl: var(--font-size-300);
  --body-size-l: var(--font-size-200);
  --body-size-m: var(--font-size-100);
  --body-size-s: var(--font-size-80);
  --body-size-xs: var(--font-size-60);

  /* detail sizes */
  --detail-size-xl: var(--font-size-100);
  --detail-size-l: var(--font-size-80);
  --detail-size-m: var(--font-size-60);
  --detail-size-s: var(--font-size-40);
  --detail-size-xs: var(--font-size-20);
}

@media (width >= 800px) {
  :root {
    /* heading sizes */
    --heading-size-xl: var(--font-size-900);  /* h2 */
  }
}