:root {
  --scaleFactor: 1.618;
  --wholestep: 1.618;
  --halfstep: 1.272;
  --quarterstep: 1.128;
  --eighthstep: 1.062;

  --wholestep-dec: 0.618;
  --halfstep-dec: 0.272;
  --quarterstep-dec: 0.128;
  --eighthstep-dec: 0.062;

  --md: 1em;
  --sm: calc(1em / var(--scaleFactor));
  --xs: calc(var(--sm) / var(--scaleFactor));
  --2xs: calc(var(--xs) / var(--scaleFactor));
  --3xs: calc(var(--2xs) / var(--scaleFactor));
  --lg: calc(1em * var(--scaleFactor));
  --xl: calc(var(--lg) * var(--scaleFactor));
  --2xl: calc(var(--xl) * var(--scaleFactor));
  --3xl: calc(var(--2xl) * var(--scaleFactor));
  --4xl: calc(var(--3xl) * var(--scaleFactor));

  /* Unitless sizes; required for adhoc calculations (division and multiplication in calc() require unitless numbers */
  /* NOTE: in calc() with multiplication or division the right side must be a unitless number */

  --sm-unitless: calc(1 / var(--scaleFactor));
  --xs-unitless: calc(var(--sm-unitless) / var(--scaleFactor));
  --2xs-unitless: calc(var(--xs-unitless) / var(--scaleFactor));
  --lg-unitless: calc(1 * var(--scaleFactor));
  --xl-unitless: calc(var(--lg-unitless) * var(--scaleFactor));
  --2xl-unitless: calc(var(--xl-unitless) * var(--scaleFactor));

  --radius-xs: var(--xs);
  --radius-sm: var(--sm);
  --radius-md: var(--md);
  --radius-lg: var(--lg);
  --radius-xl: var(--xl);

  --shadow-sm-units: 0 0 1px 0;
  --shadow-md-units-1: 0 4px 6px;
  --shadow-md-units-2: 0 2px 4px;
  --shadow-md-units-3: 0 0 1px;
  --shadow-lg-units-1: 0 11px 15px -3px;
  --shadow-lg-units-2: 0 2px 6px;
  --shadow-lg-units-3: 0 0 1px;
  --shadow-xl-units-1: 0 20px 25px;
  --shadow-xl-units-2: 0 5px 11px;
  --shadow-xl-units-3: 0 5px 11px;
  --shadow-2xl-units-1: 0 25px 50px;
  --shadow-2xl-units-2: 0 9px 18px;
  --shadow-2xl-units-3: 0 0 1px;

  --shadow-sm: var(--shadow-sm-units) rgba(0, 0, 0, 0.11);
  --shadow-md:
    var(--shadow-md-units-1) rgba(0, 0, 0, 0.08),
    var(--shadow-md-units-2) rgba(0, 0, 0, 0.11),
    var(--shadow-md-units-3) rgba(0, 0, 0, 0.4);
  --shadow-lg:
    var(--shadow-lg-units-1) rgba(0, 0, 0, 0.11),
    var(--shadow-lg-units-2) rgba(0, 0, 0, 0.07),
    var(--shadow-lg-units-3) rgba(0, 0, 0, 0.4);
  --shadow-xl:
    var(--shadow-xl-units-1) rgba(0, 0, 0, 0.09),
    var(--shadow-xl-units-2) rgba(0, 0, 0, 0.12),
    var(--shadow-xl-units-3) rgba(0, 0, 0, 0.4);
  --shadow-2xl:
    var(--shadow-2xl-units-1) rgba(0, 0, 0, 0.23),
    var(--shadow-2xl-units-2) rgba(0, 0, 0, 0.1),
    var(--shadow-2xl-units-3) rgba(0, 0, 0, 0.4);

  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}
