/* Major third 
  39px 
  31px 
  25px 
  20px 
  16px 
  13px 
  10px 
*/

:root {
  /* font sizes */
  --size-font-10: 10;
  --size-font-13: 13;
  --size-font-16: 16;
  --size-font-20: 20;
  --size-font-25: 25;
  --size-font-31: 31;
  --size-font-39: 39;
  --size-font-48: 48;
  --size-font-61: 61;

  /* alias keywords */
  --size-font-xxxxx-large: var(--size-font-61);
  --size-font-xxxx-large: var(--size-font-48);
  --size-font-xxx-large: var(--size-font-39);
  --size-font-xx-large: var(--size-font-31);
  --size-font-x-large: var(--size-font-25);
  --size-font-large: var(--size-font-20);
  --size-font-medium: var(--size-font-16);
  --size-font-small: var(--size-font-13);
  --size-font-x-small: var(--size-font-10);

  /* headings */
  /* h1 */
  --size-font-h1-min: var(--size-font-xx-large);
  --size-font-h1-max: var(--size-font-xxx-large);
  --size-lh-h1-min: 40;
  --size-lh-h1-max: 48;

  /* h2 */
  --size-font-h2-min: var(--size-font-x-large);
  --size-font-h2-max: var(--size-font-xx-large);
  --size-lh-h2-min: 32;
  --size-lh-h2-max: 40;

  /* h3 */
  --size-font-h3-min: var(--size-font-large);
  --size-font-h3-max: var(--size-font-x-large);
  --size-lh-h3-min: 24;
  --size-lh-h3-max: 32;

  /* h4 */
  --size-font-h4-min: var(--size-font-medium);
  --size-font-h4-max: var(--size-font-large);
  --size-lh-h4-min: 24;
  --size-lh-h4-max: 24;

  /* h5 */
  --size-font-h5-min: var(--size-font-small);
  --size-font-h5-max: var(--size-font-medium);
  --size-lh-h5-min: 20;
  --size-lh-h5-max: 24;

  /* h6 */
  --size-font-h6-min: var(--size-font-small);
  --size-font-h6-max: var(--size-font-medium);
  --size-lh-h6-min: 20;
  --size-lh-h6-max: 24;

  /* target screen where font-size reaches the max */
  --size-screen-min: 320;
  --size-screen-target: 1366;
  --size-font-body: 16;
  --size-font-root: 16;
  --size-font-lineheight-body: 24;
}