:root {
  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ DEFAULTS ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --white: #ffffff;
  --black: #000000;

  --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;

  --info-dark: #02538a;
  --info-light: #eff8ff;

  --warning: #ffb120;
  --warning-light: #ffdf88;
  --warning-dark: #dd6802;
  --warning-subtle: #fffaeb;

  --error: #f80a33;
  --error-light: #ff98aa;
  --error-dark: #ac0824;
  --error-subtle: #fff0f3;

  --purple: #8c5c94;
  --orange: #ff6b35;

  --default-text-color: #303136;
  --disabled-text-color: #9fa2b2;
  --text-color-secondary: #77788b;
  --text-color-light: #626371;

  --default-border-color: #cbcfd6;
  --darker-border-color: #b5b8c4;
  --tabs-border-color: #d9e8ec;

  --default-focus-color: #069df1;
  --default-link-color: #1e88e5;
  --border-color-secondary: #8b8da0;
  --default-max-app-width: 1440px;

  --background-light: #f4f8f9;
  --background-subtle: #f5f6f8;
  --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: 12px;
  --padding-md: 16px;
  --padding-lg: 18px;
  --padding-xl: 20px;
  --padding-xxl: 40px;

  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ TYPOGRAPHY ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --font-family-display: "FreightDisp Pro", "Proxima Nova", serif;

  --font-size-xxs: 10px;
  --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-size-heading: 40px;

  --line-height-sm: 18px;
  --line-height-md: 20px;
  --line-height-heading: 48px;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-bold: 600;
  --font-weight-bolder: 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, 0.1);
  --dark-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
  --default-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  --wider-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.2);
  --box-shadow-elevation-1: 2px 2px 5px 0px rgba(0, 0, 0, 0.05);

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

  /* Border widths */
  --border-width-sm: 1px;
  --border-width-md: 2px;

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

  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ NOTIFICATIONS ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --notification-yellow: #f98e07;
  --notification-green: #009f77;
  --notification-purple: #a371ac;
  --notification-blue: #48beff;
  --notification-pink: #f50d8d;
  --notification-gray: #6b7280;
}