:root {
  /* Colors */
  --text-color-50: #ffffff;
  --text-color-950: #292929;
  --primary-color-50: #cdbcf6;
  --primary-color-300: #cdbcf6;
  --primary-color-700: #6435bb;
  --primary-color-800: #563099;
  --primary-color-900: #4c2b84;
  --primary-color-950: #2C115A;
  --secondary-color-500: #fecf01;
  --secondary-color-600: #d09800;
  

  /* Font Family */
  --primary-font-family: "Lato", serif;

  /* Font size */
  --tiny-font-size: 14px;
  --xs-font-size: 16px;
  --sm-font-size: 20px;
  --md-font-size: 22px;
  --base-font-size: 24px;
  --lg-font-size: 32px;
  --xl-font-size: 40px;
  --giant-font-size: 48px;

  /* Font Weight */
  --thin-weight: 400;
  --md-weight: 600;
  --bold-weight: 700;

  /* Line Height */
  --tiny-line-height: 22.4px;
  --xs-line-height: 24px;
  --sm-line-height: 28.8px;
  --md-line-height: 30.8px;
  --base-line-height: 33.6px;
  --lg-line-height: 44.8px;
  --xl-line-height: 56px;
  --giant-line-height: 67.2px;

  /* Breakpoints */
  --xs-breakpoint: 320px;
  --sm-breakpoint: 480px;
  --md-breakpoint: 720px;
  --lg-breakpoint: 1280px;
  --xl-breakpoint: 1440px;
}