:root {
  /* Spacings */
  --size-spacing-4: 4px;
  --size-spacing-8: 8px;
  --size-spacing-12: 12px;
  --size-spacing-16: 16px;

  /* Gray colors */
  --black: #000000;
  --white: #FFFFFF;
  
  --dark-gray-1: #1A2024;
  --dark-gray-2: #252C32;
  --dark-gray-3: #303940;
  --dark-gray-4: #3C464E;
  --dark-gray-5: #48535B;
  
  --mid-gray-1: #5B6871;
  --mid-gray-2: #6E7C87;
  --mid-gray-3: #84919A;
  --mid-gray-4: #9AA6AC;
  --mid-gray-5: #B0BABF;
  
  --light-gray-1: #D5DADD;
  --light-gray-2: #DDE2E4;
  --light-gray-3: #E5E9EB;
  --light-gray-4: #EEF0F2;
  --light-gray-5: #F6F8F9;

  /* Blue */
  --blue-900: #002266;
  --blue-800: #023997;
  --blue-700: #0452C8;
  --blue-600: #0E73F6;
  --blue-500: #4094F7;
  --blue-400: #6BB3FA;
  --blue-300: #9BCFFD;
  --blue-200: #D7EDFF;
  --blue-100: #EBF7FF;
  --blue-050: #F6FCFF;

  /* Red */
  --red-900: #4D0004;
  --red-800: #8D0104;
  --red-700: #CC0905;
  --red-600: #F2271C;
  --red-500: #F76659;
  --red-400: #FA8D7F;
  --red-300: #FDAEA1;
  --red-200: #FED6CD;
  --red-100: #FFEFEB;
  --red-050: #FFFBFA;

  /* Green */
  --green-900: #003D06;
  --green-800: #066F14;
  --green-700: #119C2B;
  --green-600: #22C348;
  --green-500: #47D16C;
  --green-400: #67E48B;
  --green-300: #91F3AE;
  --green-200: #BBFBD0;
  --green-100: #EBFFF1;
  --green-050: #F5FFF8;

  /* Yellow */
  --yellow-900: #4D2A00;
  --yellow-800: #835101;
  --yellow-700: #D29404;
  --yellow-600: #F8C51B;
  --yellow-500: #F8DD4E;
  --yellow-400: #FBEC7E;
  --yellow-300: #FCF27D;
  --yellow-200: #FEF99F;
  --yellow-100: #FFFCC2;
  --yellow-050: #FFFEEB;

  /* Purple */
  --purple-900: #350080;
  --purple-800: #5606B2;
  --purple-700: #7E10E5;
  --purple-600: #A23FEE;
  --purple-500: #C479F3;
  --purple-400: #D691F8;
  --purple-300: #E8B1FC;
  --purple-200: #F5D2FE;
  --purple-100: #FCF0FF;
  --purple-050: #FEFAFF;

  /* Teal */
  --teal-900: #003833;
  --teal-800: #046C54;
  --teal-700: #0D9676;
  --teal-600: #1AC19D;
  --teal-500: #38D9B9;
  --teal-400: #62E4D3;
  --teal-300: #8CEEE6;
  --teal-200: #BBF6F4;
  --teal-100: #E4FCFC;
  --teal-050: #F1FDFD;
}

details {
  margin: 1em 0;
  padding: 0.2em 0.5em;
}

/* Typography */

.text-14 {
  font-size: 14px;
}

.text-14-bold {
  font-weight: 600;
  font-size: 14px;
}