/* new home for any global variables */
:root {
  /* color palette */
  /*--primary: rgb(25, 49, 89);*/
  --primary: #004550;
  --primary-dark: #01232B;
  --primary-light: #3980a9;
  --primary-extra-light: #bed8e9;

  --success: #4cb441;
  --success-light: #B0D100;
  --bg-success: rgba(76, 180, 65, 0.1);

  --danger: #e81931;
  --bg-danger: rgba(232, 25, 49, 0.15);

  --warn: rgba(246, 154, 49);

  --alert-hover: #f58e19;

  --bg-alert: rgba(246, 154, 49);
  --bg-alert-transparent: rgba(246, 154, 49, 0.3);
  --bg-warning: rgb(224, 183, 49);
  --bg-warning-transparent: rgb(224, 183, 49, .1);
  --alert: var(--bg-warning);
  --highlight-color: yellow;

  /* --white: white; */
  --dark-gray: #383838;
  --light-gray: rgb(208, 208, 208);
  --extra-light-gray: #f1f1f1;

  --negotiation-prep-color: var(--blue-200);

  /* --default-text-color: rgb(27, 34, 37); */
  --light-text-color: #98a6ad;

  --default-hover-background: #fafafa;

  /* task color palette */
  --new-task: rgb(135,92,145);
  --complete-task: rgb(100,143,143);
  --complete-task-dark: #36605E;
  --blocked-task: rgb(185,71,61);
  --task-progress-bar: rgb(88,157,154);
  --task-progress-bar-light: #CCE1E0;
  --task-progress-background: rgb(230,233,237);

  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ NEW COLOR PALETTE ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  /* Colors pulled from: https://www.figma.com/design/C4mWHzgzR4POAEZM2PTpLo/%F0%9F%8C%90-Zipliens-Design-System-%F0%9F%8C%90?node-id=13-819&t=uTlRnOP9UGeMoGlM-0 */
  --white: #FFFFFF;
  
  --primary-50: #E2EEEC;
  --primary-100: #BBDBD6;
  --primary-200: #6EA3A6;
  --primary-300: #267378;
  --primary-400: #175E6A;
  --primary-500: #004550;
  --primary-600: #02353D;
  --primary-700: #0E2C34;
  --primary-800: #01232B;
  --primary-900: #051A1E;

  --neutral-50: var(--white);
  --neutral-100: #EAEFF5;
  --neutral-200: #DCE4EE;
  --neutral-300: #C8CFD9;
  --neutral-400: #B1B8BC;
  --neutral-500: #92989C;
  --neutral-600: #2D3235;
  --neutral-700: #1A1D1F;
  --neutral-800: #111315;
  --neutral-900: #040F1E;

  --background-lightest: var(--white);
  --background-light: var(--neutral-100);
  --background-dark: var(--neutral-200);
  --background-darkest: var(--neutral-300);
  --background-transparent: rgba(0, 0, 0, 0.25);

  --text-lightest: #4A5156;
  --text-light: var(--neutral-600);
  --text-dark: var(--neutral-700);
  --text-darkest: var(--neutral-800);

  --success-50: #EFFFF3;
  --success-100: #C2FFD9;
  --success-200: #9DFFC6;
  --success-300: #79FFB2;
  --success-400: #39FF8A;
  --success-500: #25F679;
  --success-600: #20EE73;
  --success-700: #00CC52;
  --success-800: #079D52;
  --success-900: #008040;

  --warning-50: #FFF2E6;
  --warning-100: #FFDABF;
  --warning-200: #FFC299;
  --warning-300: #FFAB73;
  --warning-400: #FF944D;
  --warning-500: #FF7D26;
  --warning-600: #FF6600;
  --warning-700: #E65C00;
  --warning-800: #CC5200;
  --warning-900: #993D00;

  --error-50: #FFF4F3;
  --error-100: #FFA19E;
  --error-200: #FF837F;
  --error-300: #FF706D;
  --error-400: #FF544F;
  --error-500: #D42723;
  --error-600: #A31D1A;
  --error-700: #8A1613;
  --error-800: #741312;
  --error-900: #470A09;

  --blue-50: #E6F7FF;
  --blue-100: #C2E2FF;
  --blue-200: #9DCDFF;
  --blue-300: #79B8FF;
  --blue-400: #55A3FF;
  --blue-500: #338FFF;
  --blue-600: #1A7BFF;
  --blue-700: #0066FF;
  --blue-800: #0052CC;
  --blue-900: #004080;

  --yellow-50: #FFFCE6;
  --yellow-100: #FFF7C2;
  --yellow-200: #FFF29D;
  --yellow-300: #FFED79;
  --yellow-400: #FFE855;
  --yellow-500: #FFE338;
  --yellow-600: #FFD71A;
  --yellow-700: #E6B800;
  --yellow-800: #C78815;
  --yellow-900: #996300;

  --orange-50: var(--warn-50);
  --orange-100: var(--warn-100);
  --orange-200: var(--warn-200);
  --orange-300: var(--warn-300);
  --orange-400: var(--warn-400);
  --orange-500: var(--warn-500);
  --orange-600: var(--warn-600);
  --orange-700: var(--warn-700);
  --orange-800: var(--warn-800);
  --orange-900: var(--warn-900);

  --green-50: var(--success-50);
  --green-100: var(--success-100);
  --green-200: var(--success-200);
  --green-300: var(--success-300);
  --green-400: var(--success-400);
  --green-500: var(--success-500);
  --green-600: var(--success-600);
  --green-700: var(--success-700);
  --green-800: var(--success-800);
  --green-900: var(--success-900);

  --purple-50: #F2E6FF;
  --purple-100: #DABFF9;
  --purple-200: #C299F2;
  --purple-300: #AB73EC;
  --purple-400: #944DE6;
  --purple-500: #7D26DF;
  --purple-600: #6600D9;
  --purple-700: #5C00C2;
  --purple-800: #5200AB;
  --purple-900: #3D0099;

  --teal-50: #E6FAF5;
  --teal-100: #C2F2EB;
  --teal-200: #9DE9E0;
  --teal-300: #79E1D6;
  --teal-400: #55D8CC;
  --teal-500: #1AC7B8;
  --teal-600: #02B4A7;
  --teal-700: #00A99D;
  --teal-800: #059B8E;
  --teal-900: #008C80;

  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ DEFAULTS ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --primary: var(--primary-600);
  --secondary: var(--primary-50);
  --tertiary: var(--neutral-100);
  --success: var(--success-700);
  --warning: var(--warning-500);
  --error: var(--error-500);

  --default-border-color: var(--neutral-300);
  --default-focus-color: var(--primary-200);
  --default-hover-color: var(--primary-50);
  --default-text-color: var(--text-darkest);
  --default-left-nav-width-open: 240px;
  --default-left-nav-width-collapsed: 60px;
  --default-sidebar-modal-width: 33%;

  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ BUTTONS ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --btn-primary: var(--primary);
  --btn-primary-hover: var(--primary-800);
  --btn-primary-disabled: var(--neutral-300);
  --btn-primary-focus-border: var(--primary-200);

  --btn-secondary: var(--secondary);
  --btn-secondary-hover: var(--primary-200);
  --btn-secondary-disabled: var(--neutral-300);
  --btn-secondary-focus-border: var(--default-focus-color);

  --btn-tertiary: var(--tertiary);
  --btn-tertiary-hover: var(--neutral-400);
  --btn-tertiary-disabled: var(--neutral-300);
  --btn-tertiary-focus-border: #6D98DF;

  --btn-success: var(--success);
  --btn-success-hover: var(--success-800);
  --btn-success-disabled: var(--neutral-300);
  --btn-success-focus-border: var(--default-focus-color);

  --btn-warning: var(--warning);
  --btn-warning-hover: var(--warning-600);
  --btn-warning-disabled: var(--neutral-300);
  --btn-warning-focus-border: var(--default-focus-color);

  --btn-error: var(--error);
  --btn-error-hover: var(--error-600);
  --btn-error-disabled: var(--neutral-300);
  --btn-error-focus-border: var(--default-focus-color);

  --btn-bordered: var(--white);
  --btn-bordered-hover: var(--neutral-200);
  --btn-bordered-disabled: var(--neutral-300);
  --btn-bordered-focus-border: #6D98DF;

  --btn-transparent: transparent;
  --btn-transparent-hover: rgba(0, 0, 0, 0.1);
  --btn-transparent-disabled: var(--neutral-300);
  --btn-transparent-focus-border: var(--default-focus-color);

  --btn-link: transparent;
  --btn-link-hover: transparent;
  --btn-link-disabled: var(--neutral-300);
  --btn-link-focus-border: var(--default-focus-color);

  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ MARGINS ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --margin-4xs: 5px;
  --margin-3xs: 7px;
  --margin-2xs: 10px;
  --margin-xs: 12px;
  --margin-sm: 15px;
  --margin-md: 17px;
  --margin-lg: 20px;
  --margin-xl: 25px;
  --margin-2xl: 30px;
  --margin-3xl: 60px;

  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ PADDINGS ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --padding-4xs: 6px;
  --padding-3xs: 8px;
  --padding-2xs: 10px;
  --padding-xs: 12px;
  --padding-sm: 14px;
  --padding-md: 16px;
  --padding-lg: 18px;
  --padding-xl: 20px;
  --padding-2xl: 24px;
  --padding-3xl: 28px;

  --spreadsheet-cell-padding: var(--padding-xs) var(--padding-md);

  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ TYPOGRAPHY ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 48px;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-bold: 600;

  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ 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 ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --default-border-radius: 4px; /* TODO: Deprecate and use border-radius-xs */
  --border-radius-xs: 4px;
  --border-radius-sm: 8px;
  --border-radius-md: 10px;
  --border-radius-lg: 12px;
  --border-radius-xl: 14px;
  --border-radius-2xl: 24px;

  /* ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ FORMS ~~~~~~~~~~.~~~~~~~~~~.~~~~~~~~~~ */
  --form-padding-vert: .65rem;
  --form-padding-horiz: 1rem;
  --input-border-color: #dee2e6;
}