:root {

  /* Layout */
  --header-height: 80px;

  /* Color — Brand */
  --color-primary-700:   #280071;
  --color-primary-800:   #3b2d6d;
  --color-primary-alpha: rgba(40, 0, 113, 0.06);
  --color-pink-400:      #E72580;
  --color-pink-500:      #DA1884;
  --color-pink-600:      #b8146f;

  /* Color — Neutral */
  --color-white:          #ffffff;
  --color-grey-50:        #fafafa;
  --color-grey-200:       #E0E0E0;
  --color-grey-700:       #4a5568;
  --color-black:          #000000;
  --color-black-alpha-20: rgba(0, 0, 0, 0.2);

  /* Color — Semantic */
  --color-text-primary:      var(--color-primary-700);
  --color-text-body:         var(--color-grey-700);
  --color-bg-page:           var(--color-grey-50);
  --color-btn-primary:       var(--color-pink-500);
  --color-btn-primary-hover: var(--color-pink-600);
  --color-btn-outline:       var(--color-primary-700);
  --color-btn-outline-hover: var(--color-primary-alpha);

  /* Typography — Font families */
  --family-heading:  'Rubik', sans-serif;
  --fontFamily-body: 'Inter';

  /* Typography — Font sizes */
  --fontSize-sm:   0.875rem;
  --fontSize-md:   1rem;
  --fontSize-lg:   1.125rem;
  --fontSize-xl:   1.25rem;
  --fontSize-2xl:  1.5rem;
  --fontSize-3xl:  1.75rem;
  --fontSize-4xl:  2.25rem;

  /* Typography — Font weights */
  --fontWeight-light:    300;
  --fontWeight-regular:  400;
  --fontWeight-medium:   500;
  --fontWeight-semibold: 600;
  --fontWeight-bold:     700;

  /* Typography — Line heights */
  --lineHeight-4:   1rem;
  --lineHeight-5:   1.25rem;
  --lineHeight-6:   1.5;
  --lineHeight-36:  2.25rem;

  /* Typography — Letter spacings */
  --letterSpacing-xs: 0rem;
  --letterSpacing-sm: 0.0125rem;
  --letterSpacing-md: 0.025rem;
  --letterSpacing-lg: 0.0625rem;

}