:root {
  /* Color Primitives */
  /* Base */
  --color-base-white: #ffffff;
  --color-base-black: #000000;
  --color-base-transparent: #ffffff00;

  /* Gray */
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #eaeaec;
  --color-gray-300: #bec1c5;
  --color-gray-400: #a0a4ab;
  --color-gray-500: #757C8A;
  --color-gray-600: #595E69;
  --color-gray-700: #3e434c;
  --color-gray-800: #252b37;
  --color-gray-900: #181d25;

  /* Brand */
  --color-brand-50: #f7fcfd;
  --color-brand-100: #f0f9fb;
  --color-brand-200: #c0e7ec;
  --color-brand-300: #91d5de;
  --color-brand-400: #59b8c5;
  --color-brand-500: #1b9bac;
  --color-brand-600-main: #057a8a;
  --color-brand-700: #046876;
  --color-brand-800: #034e59;

  /* Red */
  --color-red-50: #fdf6f6;
  --color-red-100: #fceeee;
  --color-red-300: #ec9898;
  --color-red-400: #e15b5b;
  --color-red-500: #d24141;
  --color-red-600: #b82828;

  /* Orange */
  --color-orange-50: #fefaf5;
  --color-orange-100: #fef4ec;
  --color-orange-300: #f5be8f;
  --color-orange-400: #ed8e3b;
  --color-orange-500: #dc6803;
  --color-orange-600: #b25300;

  /* Orange Bright */
  --color-orange-bright-500: #f79009;
  --color-orange-bright-600: #c26e00;

  /* Green */
  --color-green-50: #f8fcf8;
  --color-green-100: #f1f9f2;
  --color-green-300: #a7dcad;
  --color-green-400: #66c26f;
  --color-green-500: #29a76e;
  --color-green-600: #208356;

  /* Yellow-Orange */
  --color-yellow-orange-50: #fffbf5;
  --color-yellow-orange-100: #fef5e7;
  --color-yellow-orange-300: #f3d39b;
  --color-yellow-orange-400: #eca62d;
  --color-yellow-orange-500: #d08b13;
  --color-yellow-orange-600: #a36700;

  /* Yellow */
  --color-yellow-50: #fffdf5;
  --color-yellow-100: #fffae6;
  --color-yellow-200: #fff6d1;
  --color-yellow-300: #ffefad;
  --color-yellow-400: #eaae48;

  /* Blue */
  --color-blue-50: #f5fbff;
  --color-blue-100: #ecf7fe;
  --color-blue-300: #8dcaec;
  --color-blue-400: #36a2dd;
  --color-blue-500: #028dd9;
  --color-blue-600: #0276b6;

  /* Blue Bright */
  --color-blue-bright-50: #f5fbff;
  --color-blue-bright-200: #b9e6fe;
  --color-blue-bright-400: #67a4e4;
  --color-blue-bright-500: #2f82da;
  --color-blue-bright-600: #266cb5;

  /* Teal Bright */
  --color-teal-bright-200: #9deffb;
  --color-teal-bright-300: #81e1ef;
  --color-teal-bright-400: #43c9db;

  /* Teal Bright Alt */
  --color-teal-bright-alt-200: #9dfbea;
  --color-teal-bright-alt-300: #81efdb;
  --color-teal-bright-alt-400: #22ddbb;

  /* Color Styles */

  /* Text */
  --color-text-primary_on-brand: var(--color-base-white);
  --color-text-secondary_on-brand: var(--color-brand-200);
  --color-text-tertiary_on-brand: var(--color-brand-300);
  --color-text-quaternary_on-brand: var(--color-brand-400);
  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-700);
  --color-text-tertiary: var(--color-gray-600);
  --color-text-quaternary: var(--color-gray-500);
  --color-text-white: var(--color-base-white);
  --color-text-disabled: var(--color-gray-400);
  --color-text-disabled-alt: var(--color-gray-500);
  --color-text-placeholder: var(--color-gray-600);
  --color-text-brand-primary: var(--color-brand-700);
  --color-text-brand-secondary: var(--color-brand-600-main);
  --color-text-brand-tertiary: var(--color-brand-500);
  --color-text-error-primary: var(--color-red-500);
  --color-text-error-primary_hover: var(--color-red-600);
  --color-text-record-primary: var(--color-red-500);
  --color-text-record-primary_hover: var(--color-red-600);
  --color-text-warning-primary: var(--color-orange-600);
  --color-text-success-primary: var(--color-green-600);
  --color-text-info-primary: var(--color-blue-600);
  --color-text-progress-primary: var(--color-yellow-orange-600);
  --color-text-note-primary: var(--color-yellow-orange-600);
  --color-text-link-primary: var(--color-blue-bright-500);
  --color-text-link-primary_hover: var(--color-blue-bright-600);

  /* Border */
  --color-border-primary: var(--color-gray-300);
  --color-border-primary_hover: var(--color-gray-400);
  --color-border-secondary: var(--color-gray-200);
  --color-border-tertiary: var(--color-gray-100);
  --color-border-disabled: var(--color-gray-200);
  --color-border-highlighted: var(--color-gray-600);
  --color-border-new: var(--color-blue-bright-200);
  --color-border-selected: var(--color-brand-500);
  --color-border-selected-secondary: var(--color-teal-bright-400);
  --color-border-brand: var(--color-brand-500);
  --color-border-brand_hover: var(--color-brand-600-main);
  --color-border-brand-disabled: var(--color-brand-300);
  --color-border-error: var(--color-red-400);
  --color-border-error_subtle: var(--color-red-300);
  --color-border-success: var(--color-green-400);
  --color-border-success_subtle: var(--color-green-300);
  --color-border-warning: var(--color-orange-400);
  --color-border-warning_subtle: var(--color-orange-300);
  --color-border-info: var(--color-blue-400);
  --color-border-info_subtle: var(--color-blue-300);
  --color-border-progress: var(--color-yellow-orange-400);
  --color-border-progress_subtle: var(--color-yellow-orange-300);
  --color-border-note: var(--color-yellow-400);
  --color-border-note_subtle: var(--color-yellow-300);
  --color-border-record: var(--color-red-400);
  --color-border-record_subtle: var(--color-red-300);

  /* Border Radius */
  --border-radius-lg: 12px;
  --border-radius-md: 8px;
  --border-radius-xs: 4px;

  /* Foreground */
  --color-fg-primary: var(--color-gray-900);
  --color-fg-secondary: var(--color-gray-700);
  --color-fg-secondary_hover: var(--color-gray-800);
  --color-fg-tertiary: var(--color-gray-600);
  --color-fg-tertiary_hover: var(--color-gray-700);
  --color-fg-quaternary: var(--color-gray-400);
  --color-fg-quaternary_hover: var(--color-gray-500);
  --color-fg-white: var(--color-base-white);
  --color-fg-disabled: var(--color-gray-200);
  --color-fg-brand-primary: var(--color-brand-600-main);
  --color-fg-brand-secondary: var(--color-brand-500);
  --color-fg-brand-secondary_hover: var(--color-brand-600-main);
  --color-fg-error-primary: var(--color-red-500);
  --color-fg-error-secondary: var(--color-red-400);
  --color-fg-warning-primary: var(--color-orange-500);
  --color-fg-warning-secondary: var(--color-orange-400);
  --color-fg-success-primary: var(--color-green-500);
  --color-fg-success-secondary: var(--color-green-400);
  --color-fg-info-primary: var(--color-blue-500);
  --color-fg-info-secondary: var(--color-blue-400);
  --color-fg-progress-primary: var(--color-yellow-orange-500);
  --color-fg-progress-secondary: var(--color-yellow-orange-400);
  --color-fg-note-primary: var(--color-yellow-orange-500);
  --color-fg-note-secondary: var(--color-yellow-400);
  --color-fg-record-primary: var(--color-red-500);
  --color-fg-record-secondary: var(--color-red-400);
  --color-fg-icn_primary: var(--color-teal-bright-400);
  --color-fg-icn_secondary: var(--color-teal-bright-300);
  --color-fg-icn_dark: var(--color-brand-700);
  --color-fg-icn_primary-alt: var(--color-teal-bright-alt-400);
  --color-fg-icn_secondary-alt: var(--color-teal-bright-alt-300);

  /* Background */
  --color-bg-primary: var(--color-base-white);
  --color-bg-primary_hover: var(--color-gray-50);
  --color-bg-secondary: var(--color-gray-50);
  --color-bg-secondary_hover: var(--color-gray-100);
  --color-bg-tertiary: var(--color-gray-100);
  --color-bg-quaternary: var(--color-gray-200);
  --color-bg-primary-solid: var(--color-gray-800);
  --color-bg-secondary-solid: var(--color-gray-700);
  --color-bg-tertiary-solid: var(--color-gray-600);
  --color-bg-disabled: var(--color-gray-100);
  --color-bg-disabled_subtle: var(--color-gray-50);
  --color-bg-new: var(--color-blue-bright-50);
  --color-bg-brand-primary: var(--color-brand-50);
  --color-bg-brand-secondary: var(--color-brand-100);
  --color-bg-brand-solid: var(--color-brand-500);
  --color-bg-brand-solid_hover: var(--color-brand-600-main);
  --color-bg-brand-section: var(--color-brand-700);
  --color-bg-brand-section_subtle: var(--color-brand-600-main);
  --color-bg-not-started-primary: var(--color-gray-100);
  --color-bg-not-started-secondary: var(--color-gray-200);
  --color-bg-error-primary: var(--color-red-50);
  --color-bg-error-secondary: var(--color-red-100);
  --color-bg-warning-primary: var(--color-orange-50);
  --color-bg-warning-secondary: var(--color-orange-100);
  --color-bg-progress-primary: var(--color-yellow-orange-50);
  --color-bg-progress-secondary: var(--color-yellow-orange-100);
  --color-bg-note-primary: var(--color-yellow-50);
  --color-bg-note-secondary: var(--color-yellow-100);
  --color-bg-note-tertiary: var(--color-yellow-200);
  --color-bg-success-primary: var(--color-green-50);
  --color-bg-success-secondary: var(--color-green-100);
  --color-bg-info-primary: var(--color-blue-50);
  --color-bg-info-secondary: var(--color-blue-100);
  --color-bg-record-primary: var(--color-red-50);
  --color-bg-record-secondary: var(--color-red-100);
  --color-bg-record-solid: var(--color-red-500);
  --color-bg-record-solid_hover: var(--color-red-600);
  --color-bg-highlighted-solid: var(--color-orange-bright-500);
  --color-bg-highlighted-solid-secondary: var(--color-orange-bright-600);

  /* Text Vars */

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semi-bold: 600;
  --weight-bold: 700;
  --weight-extra-bold: 800;

  --font-size-nav-title: 17px;
  --font-size-nav-item: 15px;
  --font-size-page-title: 24px;

  --font-size-icon: 16px;

  --font-size-lg: 18px;
  --font-size-md: 16px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;
  --font-size-xxs: 10px;

  --line-height-text-md: 24px;
  --line-height-text-xs: 18px;
}