:root {
  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ DEFAULTS ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --white: #FFFFFF;
  
  --primary: #069DF1;
  --primary-light: #48BEFF;
  --primary-dark: #0063A7;
  --primary-opacity-05: rgba(6, 157, 241, 0.05);
  --primary-opacity-10: rgba(6, 157, 241, 0.1);

  --secondary: #7C98B3;
  --secondary-light: #C1D8E0;
  --secondary-dark: #55697E;

  --tertiary: #2A2E2E;
  --tertiary-light: #A4ABAB;
  --tertiary-dark: #151717;
  --tertiary-subtle: #E1E3E3;

  --success: #06D6A0;
  --success-light: #66EFC3;
  --success-dark: #00654F;

  --warning: #FFB120;
  --warning-light: #FFDF88;
  --warning-dark: #DD6802;

  --error: #F80A33;
  --error-light: #FF98AA;
  --error-dark: #AC0824;

  --purple: #8C5C94;
  --orange: #FF6B35;

  --default-border-color: #CBCFD6;
  --default-focus-color: #069DF1;
  --default-link-color: #1E88E5;
  --default-text-color: #2A2E2E;
  --disabled-text-color: #9FA2B2;
  --default-max-app-width: 1600px;

  --background-light: #F4F8F9;
  --background-dark: #2B333B;

  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ BUTTONS ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --btn-primary: var(--primary);
  --btn-primary-hover: var(--primary-light);
  --btn-primary-active: var(--primary-dark);
  --btn-primary-disabled: var(--tertiary-subtle);

  --btn-secondary: var(--secondary);
  --btn-secondary-hover: var(--secondary-light);
  --btn-secondary-active: var(--secondary-dark);
  --btn-secondary-disabled: var(--tertiary-subtle);

  --btn-tertiary: var(--tertiary);
  --btn-tertiary-hover: var(--tertiary-light);
  --btn-tertiary-active: var(--tertiary-dark);
  --btn-tertiary-disabled: var(--tertiary-subtle);

  --btn-success: var(--success);
  --btn-success-hover: var(--success-light);
  --btn-success-active: var(--success-dark);
  --btn-success-disabled: var(--tertiary-subtle);

  --btn-warning: var(--warning);
  --btn-warning-hover: var(--warning-light);
  --btn-warning-active: var(--warning-dark);
  --btn-warning-disabled: var(--tertiary-subtle);

  --btn-error: var(--error);
  --btn-error-hover: var(--error-light);
  --btn-error-active: var(--error-dark);
  --btn-error-disabled: var(--tertiary-subtle);

  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ MARGINS ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --margin-xs: 6px;
  --margin-sm: 10px;
  --margin-md: 16px;
  --margin-lg: 20px;
  --margin-xl: 25px;
  --margin-xxl: 35px;

  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ PADDINGS ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --padding-xs: 8px;
  --padding-sm: 10px;
  --padding-md: 16px;
  --padding-lg: 18px;
  --padding-xl: 20px;
  --padding-xxl: 40px;

  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ TYPOGRAPHY ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-xxl: 44px;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --font-weight-boldest: 900;

  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ BREAKPOINTS ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --break-point-mobile: 500px;
  --break-point-sm: 800px;
  --break-point-md: 1250px;
  --break-point-lg: 1500px;
  --break-point-xl: 1600px;

  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ BOX SHADOWS ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --card-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1);
  --dark-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .3);
  --default-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1);
  --wider-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, .2);
  --box-shadow-elevation-1: 2px 2px 5px 0px rgba(0, 0, 0, .05);

  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ BORDERS ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --border-radius-xs: 2px;
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 8px;

  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ ELEMENT SIZES ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --nav-header-height: 40px;
  --side-panel-width: 300px;
}