:root {

  /* BASE */
  --bg-base-100: #FFFFFF;
  --bg-base-200: #F0F2F5;
  --bg-base-300: #E2E4E8;
  --bg-base-400: #D3D5DC;

  --text-base-100: #26272B;
  --text-muted-100: #515256;
  --text-placeholder-100: #9C9EA3;
  --text-link-100: #1659FF;

  --line-base-100: #D5D8E0;
  --line-base-focus: #66676A;

  /* INV */
  --bg-inv-100: #343438;
  --bg-inv-200: #28282B;
  --bg-inv-300: #1E1F21;
  --bg-inv-400: #151617;

  --text-inv-100: #FFFFFF;
  --text-inv-muted-100: #C1C3CA;
  --text-inv-placeholder-100: #9A9AA1;
  --text-inv-link-100: #7BA1FF;
  
  --line-inv-100: #58585E;
  --line-inv-focus: #BABAC6;
  
  /* PRIMARY */
  --bg-primary-100: #FFF9E5;
  --bg-primary-150: #FFF4D0;
  --bg-primary-200: #FFCC14;
  --bg-primary-300: #F7C614;
  --bg-primary-400: #F0C013;

  --line-primary-100: #FFE27B;
  
  /* SUCCESS */
  --bg-success-100: #D7FFE4;
  --bg-success-200: #6CE392;
  --bg-success-300: #67D98B;
  --bg-success-400: #62CF85;

  --line-success-100: #B6F7CB;

  /* DANGER */
  --bg-danger-100: #FFD5D1;
  --bg-danger-200: #F39188;
  --bg-danger-300: #EE7E74;
  --bg-danger-400: #EA6D60;

  --line-danger-100: #FBC4BF;
  --text-danger-100: #EA6D60;

  /* ADDITIONAL */
  --bg-backdrop: rgba(0,0,0,0.8);

}

:root {
  --border-radius-panel: 12px;
  --border-radius-control: 9px;
  --border-radius-control-sm: 5px;
  --border-radius-dropdown: 9px;
  --border-radius-modal: 20px;

  --zindex-sticky: 1020;
  --zindex-fixed: 1030;
  --zindex-offcanvas-backdrop: 1040;
  --zindex-offcanvas: 1045;
  --zindex-modal-backdrop: 1050;
  --zindex-modal: 1055;
  --zindex-dropdown: 1060;
  --zindex-popover: 1070;
  --zindex-tooltip: 1080;
  --zindex-toast: 1090;
}

:global(html, body) {
  margin: 0;
  padding: 0;
  font-family: "Onest", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: var(--text-base-100);
}