/* Colors */
:root {
    --white: #ffffff;
    --primary: #376cba;
    --purple: rgb(63 81 181 / 86%);
    --yellow: #fed167;
    --gray: #555555;
    --light-gray: #dde0e4;
    --light-blue: rgb(55 108 186 / 76%);
    --primary-light: color-mix(in srgb, var(--primary), #fff 25%);
    --primary-light100: color-mix(in srgb, var(--primary), #fff 10%);
    --primary-light200: color-mix(in srgb, var(--primary), #fff 20%);
    --primary-light300: color-mix(in srgb, var(--primary), #fff 30%);
    --primary-light400: color-mix(in srgb, var(--primary), #fff 40%);
    --primary-light500: color-mix(in srgb, var(--primary), #fff 50%);
    --primary-light600: color-mix(in srgb, var(--primary), #fff 60%);
    --primary-light700: color-mix(in srgb, var(--primary), #fff 70%);
    --primary-light800: color-mix(in srgb, var(--primary), #fff 80%);
    --primary-light900: color-mix(in srgb, var(--primary), #fff 90%);
  
    --primary-dark: color-mix(in srgb, var(--primary), #000 25%);
    --primary-dark100: color-mix(in srgb, var(--primary), #000 10%);
    --primary-dark200: color-mix(in srgb, var(--primary), #000 20%);
    --primary-dark300: color-mix(in srgb, var(--primary), #000 30%);
    --primary-dark400: color-mix(in srgb, var(--primary), #000 40%);
    --primary-dark500: color-mix(in srgb, var(--primary), #000 50%);
    --primary-dark600: color-mix(in srgb, var(--primary), #000 60%);
    --primary-dark700: color-mix(in srgb, var(--primary), #000 70%);
    --primary-dark800: color-mix(in srgb, var(--primary), #000 80%);
    --primary-dark900: color-mix(in srgb, var(--primary), #000 90%);
    /*--primary-100: */
  
    --transparent100: 10%;
    --transparent900: rgba(var(--primary), 10%);
    --yellow100: rgba(var(--yellow), 10%);
  }
  
  .primary {
    background-color: var(--primary);
    color: white;
  }
  
  .light100 {
    color: var(--primary-light100);  
    & .bg {
      background-color: var(--primary-light100);
    }
    & .text {
      color: var(--primary-light100)
    }
  }
  
  .light200 {
    color: var(--primary-light200);
    & .bg {
      background-color: var(--primary-light200);
    }
  
    & .text {
      color: var(--primary-light200);
    }
  }
  
  .light300 {
    color: var(--primary-light300);
  
    &.bg {
      background-color: var(--primary-light300);
    }
  
    &.text {
      color: var(--primary-light300);
    }
  
  }
  
  .light400 {
    color: var(--primary-light400);
  
    &.bg {
      background-color: var(--primary-light400);
    }
  
    &.text {
      color: var(--primary-light400);
    }
  }
  
  .light500 {
    color: var(--primary-light500);
  
    &.bg {
      background-color: var(--primary-light500);
    }
  
    &.text {
      color: var(--primary-light500);
    }
  
  }
  
  .light600 {
    color: var(--primary-light600);
  
    &.bg {
      background-color: var(--primary-light600);
    }
  
    &.text {
      color: var(--primary-light600);
    }
  
  }
  
  .light700 {
    color: var(--primary-light700);
  
    &.bg {
      background-color: var(--primary-light700);
    }
  
    &.text {
      color: var(--primary-light700);
    }
  
  }
  
  .light800 {
    color: var(--primary-light800);
  
    &.bg {
      background-color: var(--primary-light800);
    }
  
    &.text {
      color: var(--primary-light800);
    }
  }
  
  .light900 {
    color: var(--primary-light900);
  
    &.bg {
      background-color: var(--primary-light900);
    }
  
    &.text {
      color: var(--primary-light900);
    }
  
  }
  
  .dark100 {
    color: var(--primary-dark100);
  
    &.bg {
      background-color: var(--primary-dark100);
    }
  }
  
  .dark200 {
    color: var(--primary-dark200);
  
    &.bg {
      background-color: var(--primary-dark200);
    }
  }
  
  .dark300 {
    color: var(--primary-dark300);
  
    &.bg {
      background-color: var(--primary-dark300);
    }
  }
  
  .dark400 {
    color: var(--primary-dark400);  
    &.bg {
      background-color: var(--primary-dark400);
    }
  }
  
  .dark500 {
    color: var(--primary-dark500);  
    &.bg {
      background-color: var(--primary-dark500);
    }
  }
  
  .dark600 {
    color: var(--primary-dark600);  
    &.bg {
      background-color: var(--primary-dark600);
    }
  }
  
  .dark700 {
    color: var(--primary-dark700);  
    &.bg {
      background-color: var(--primary-dark700);
    }
  }
  
  .dark800 {
    color: var(--primary-dark800);  
    &.bg {
      background-color: var(--primary-dark800);
    }
  }
  
  .dark900 {
    color: var(--primary-dark900);  
    &.bg {
      background-color: var(--primary-dark900);
    }
  }