:root {
  /* Min values */
  --fluid-min-width: 320;
  --fluid-min-font-size: 16;
  --type-min-scale: 1.2;

  /* Max values */
  --fluid-max-width: 1920;
  --fluid-max-font-size: 18;
  --type-max-scale: 1.25;

  /* Spacing multipliers */
  --multiplier-3xs: 0.25;
  --multiplier-2xs: 0.5;
  --multiplier-xs: 0.75;
  --multiplier-m: 1.5;
  --multiplier-l: 2;
  --multiplier-xl: 3;
  --multiplier-2xl: 4;
  --multiplier-3xl: 6;
}

@media screen and (min-width: 1140px) {

  /* Change to max viewport width (match --fluid-max-width value) */
  :root {
    --fluid-screen: calc(var(--fluid-max-width) * 1px);
  }
}


/* 
    *
    * Variables not to change
    *
    */

:root {
  --fluid-screen: 100vw;
  --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width)));

  --f--2-min: calc(var(--fluid-min-font-size) / var(--type-min-scale) / var(--type-min-scale));
  --f--2-max: calc(var(--fluid-max-font-size) / var(--type-max-scale) / var(--type-max-scale));
  --step--2: calc(((var(--f--2-min) / 16) * 1rem) + (var(--f--2-max) - var(--f--2-min)) * var(--fluid-bp));

  --f--1-min: calc(var(--fluid-min-font-size) / var(--type-min-scale));
  --f--1-max: calc(var(--fluid-max-font-size) / var(--type-max-scale));
  --step--1: calc(((var(--f--1-min) / 16) * 1rem) + (var(--f--1-max) - var(--f--1-min)) * var(--fluid-bp));

  --f-0-min: var(--fluid-min-font-size);
  --f-0-max: var(--fluid-max-font-size);
  --step-0: calc(((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) * var(--fluid-bp));

  --f-1-min: calc(var(--fluid-min-font-size) * var(--type-min-scale));
  --f-1-max: calc(var(--fluid-max-font-size) * var(--type-max-scale));
  --step-1: calc(((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) * var(--fluid-bp));

  --f-2-min: calc(var(--fluid-min-font-size) * var(--type-min-scale) * var(--type-min-scale));
  --f-2-max: calc(var(--fluid-max-font-size) * var(--type-max-scale) * var(--type-max-scale));
  --step-2: calc(((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) * var(--fluid-bp));

  --f-3-min: calc(var(--fluid-min-font-size) * var(--type-min-scale) * var(--type-min-scale) * var(--type-min-scale));
  --f-3-max: calc(var(--fluid-max-font-size) * var(--type-max-scale) * var(--type-max-scale) * var(--type-max-scale));
  --step-3: calc(((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min)) * var(--fluid-bp));

  --f-4-min: calc(var(--fluid-min-font-size) * var(--type-min-scale) * var(--type-min-scale) * var(--type-min-scale) * var(--type-min-scale));
  --f-4-max: calc(var(--fluid-max-font-size) * var(--type-max-scale) * var(--type-max-scale) * var(--type-max-scale) * var(--type-max-scale));
  --step-4: calc(((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min)) * var(--fluid-bp));

  --f-5-min: calc(var(--fluid-min-font-size) * var(--type-min-scale) * var(--type-min-scale) * var(--type-min-scale) * var(--type-min-scale) * var(--type-min-scale));
  --f-5-max: calc(var(--fluid-max-font-size) * var(--type-max-scale) * var(--type-max-scale) * var(--type-max-scale) * var(--type-max-scale) * var(--type-max-scale));
  --step-5: calc(((var(--f-5-min) / 16) * 1rem) + (var(--f-5-max) - var(--f-5-min)) * var(--fluid-bp));

  --fc-3xs-min: (var(--fc-s-min) * var(--multiplier-3xs));
  --fc-3xs-max: (var(--fc-s-max) * var(--multiplier-3xs));

  --fc-2xs-min: (var(--fc-s-min) * var(--multiplier-2xs));
  --fc-2xs-max: (var(--fc-s-max) * var(--multiplier-2xs));

  --fc-xs-min: (var(--fc-s-min) * var(--multiplier-xs));
  --fc-xs-max: (var(--fc-s-max) * var(--multiplier-xs));

  --fc-s-min: (var(--f-0-min, var(--fluid-min-font-size)));
  --fc-s-max: (var(--f-0-max, var(--fluid-max-font-size)));

  --fc-m-min: (var(--fc-s-min) * var(--multiplier-m));
  --fc-m-max: (var(--fc-s-max) * var(--multiplier-m));

  --fc-l-min: (var(--fc-s-min) * var(--multiplier-l));
  --fc-l-max: (var(--fc-s-max) * var(--multiplier-l));

  --fc-xl-min: (var(--fc-s-min) * var(--multiplier-xl));
  --fc-xl-max: (var(--fc-s-max) * var(--multiplier-xl));

  --fc-2xl-min: (var(--fc-s-min) * var(--multiplier-2xl));
  --fc-2xl-max: (var(--fc-s-max) * var(--multiplier-2xl));

  --fc-3xl-min: (var(--fc-s-min) * var(--multiplier-3xl));
  --fc-3xl-max: (var(--fc-s-max) * var(--multiplier-3xl));

  /* T-shirt sizes */
  --space-3xs: calc(((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-3xs-max) - var(--fc-3xs-min)) * var(--fluid-bp));
  --space-2xs: calc(((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-2xs-min)) * var(--fluid-bp));
  --space-xs: calc(((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-xs-min)) * var(--fluid-bp));
  --space-s: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-s-min)) * var(--fluid-bp));
  --space-m: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-m-min)) * var(--fluid-bp));
  --space-l: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-l-min)) * var(--fluid-bp));
  --space-xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
  --space-2xl: calc(((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-2xl-min)) * var(--fluid-bp));
  --space-3xl: calc(((var(--fc-3xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-3xl-min)) * var(--fluid-bp));

  /* One-up pairs */
  --space-3xs-2xs: calc(((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-3xs-min)) * var(--fluid-bp));
  --space-2xs-xs: calc(((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-2xs-min)) * var(--fluid-bp));
  --space-xs-s: calc(((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-xs-min)) * var(--fluid-bp));
  --space-s-m: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-s-min)) * var(--fluid-bp));
  --space-m-l: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-m-min)) * var(--fluid-bp));
  --space-l-xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-l-min)) * var(--fluid-bp));
  --space-xl-2xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
  --space-2xl-3xl: calc(((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-2xl-min)) * var(--fluid-bp));

  /* Custom pairs */
  --space-s-l: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-s-min)) * var(--fluid-bp));

  --radius-3xs: calc(((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-3xs-max) - var(--fc-3xs-min)) * var(--fluid-bp));
  --radius-2xs: calc(((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-2xs-min)) * var(--fluid-bp));
  --radius-xs: calc(((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-xs-min)) * var(--fluid-bp));
  --radius-s: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-s-min)) * var(--fluid-bp));
  --radius-m: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-m-min)) * var(--fluid-bp));
  --radius-l: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-l-min)) * var(--fluid-bp));
  --radius-xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-xl-min)) * var(--fluid-bp));

}