:root {
  --bs-01: 0px 1px 1px 0px hsla(0, 0%, 0%, 0.14),
    0px 2px 1px -1px hsla(0, 0%, 0%, 0.12), 0px 1px 3px 0px hsla(0, 0%, 0%, 0.2);
  --bs-02: 0px 2px 2px 0px hsla(0, 0%, 0%, 0.14),
    0px 3px 1px -2px hsla(0, 0%, 0%, 0.12), 0px 1px 5px 0px hsla(0, 0%, 0%, 0.2);
  --bs-03: 0px 3px 4px 0px hsla(0, 0%, 0%, 0.14),
    0px 3px 3px -2px hsla(0, 0%, 0%, 0.12), 0px 1px 8px 0px hsla(0, 0%, 0%, 0.2);
  --bs-04: 0px 4px 5px 0px hsla(0, 0%, 0%, 0.14),
    0px 1px 10px 0px hsla(0, 0%, 0%, 0.12),
    0px 2px 4px -1px hsla(0, 0%, 0%, 0.2);
  --bs-06: 0px 6px 10px 0px hsla(0, 0%, 0%, 0.14),
    0px 1px 18px 0px hsla(0, 0%, 0%, 0.12),
    0px 3px 5px -1px hsla(0, 0%, 0%, 0.2);
  --bs-08: 0px 8px 10px 1px hsla(0, 0%, 0%, 0.14),
    0px 3px 14px 2px hsla(0, 0%, 0%, 0.12),
    0px 5px 5px -3px hsla(0, 0%, 0%, 0.2);
  --bs-12: 0px 12px 17px 2px hsla(0, 0%, 0%, 0.14),
    0px 5px 22px 4px hsla(0, 0%, 0%, 0.12),
    0px 7px 8px -4px hsla(0, 0%, 0%, 0.2);
  --bs-16: 0px 16px 24px 2px hsla(0, 0%, 0%, 0.14),
    0px 6px 30px 5px hsla(0, 0%, 0%, 0.12),
    0px 8px 10px -5px hsla(0, 0%, 0%, 0.2);
  --bs-24: 0px 24px 38px 3px hsla(0, 0%, 0%, 0.14),
    0px 9px 46px 8px hsla(0, 0%, 0%, 0.12),
    0px 11px 15px -7px hsla(0, 0%, 0%, 0.2);

  --primary-color-1: #caf0f8;
  --primary-color-2: #ade8f4;
  --primary-color-3: #90e0ef;
  --primary-color-4: #48cae4;
  --primary-color-5: #00b4d8;
  --primary-color-6: #0096c7;
  --primary-color-7: #0077b6;
  --primary-color-8: #023e8a;
  --primary-color-9: #03045e;
  --secondary-color-1: #fbf7b9;
  --secondary-color-2: #f3e495;
  --secondary-color-3: #f2dd7e;
  --secondary-color-4: #f0d767;
  --secondary-color-5: #eed04f;
  --secondary-color-6: #ecca38;
  --secondary-color-7: #ebc321;
  --secondary-color-8: #e9bd0a;
  --secondary-color-9: #c29c08;
  --grey-color-1: #fafafa;
  --grey-color-2: #F5F5F5;
  --grey-color-3: #EEEEEE;
  --grey-color-4: #E0E0E0;
  --grey-color-5: #BDBDBD;
  --grey-color-6: #757575;
  --grey-color-7: #616161;
  --grey-color-8: #424242;
  --grey-color-9: #212121;
  --green-color: #05af3d;
  --yellow-color: #f0ad4e;
  --red-color: #ff5555;
  --input-color: #051923;
  --focus-color: #ecf8fb;
  --focus-outline: 4px solid var(--primary-color-3);
  --input-background: white;

  --header-background: var(--grey-color-3);
  --main-background: var(--grey-color-3);

  --input-font: 400 1em Montserrat;
  --label-font: 700 1em Montserrat;

  --input-height: 50px;
  --navbar-size: 50px;
  --sidebar-size: 200px;

  --border-radius: 0.25rem;
  --border-radius-button: 0.75rem;

  --border: 1px solid #e0e0e0;

  --input-border-bottom: 1px solid var(--grey-color-5);

  --input-outline-focus: 3px solid var(--primary-color-3);

  --sidebar-padding: 1.5rem;
  --footer-padding: 0 1rem;
  --input-padding: 1.25rem 0.5rem 0.5rem 0.5rem;

  --sidebar-gap: 3rem;

  --main-transition: 0.25s;

  --header-z-index: 1;
  --sidebar-z-index: 2;
  --footer-z-index: 3;
  --modal-z-index: 9;
  --toast-z-index: 10;

  --dashboard-card-width: 20rem;
  --dashboard-card-border-radius: 0.5rem;
}