@import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --brand-green: hsla(143, 100%, 34%, 1); /*#00AE42*/
  --brand-blue: hsla(207, 87%, 23%, 1); /*#0D3E66*/

  /* BUTTONS */
  --button-white: hsla(0, 0%, 100%, 1); /*#FFFFFF*/
  --button-dark-gray: hsla(0, 0%, 26%, 1); /*#434343*/
  --button-light-gray: hsla(223, 14%, 73%, 1); /*#ABB3C7*/
  --button-gray: hsla(240, 4%, 19%, 1); /*#2F2F31*/
  --button-black: hsla(240, 13%, 5%, 1); /*#0D0D0F*/
  --button-destructive: hsla(0, 54%, 67%, 1); /*#E96B6B*/
  --button-disabled: hsla(220, 21%, 89%, 1); /*#DDE1E9*/
  --button-ghost: hsla(222, 56%, 96%, 1); /*#F1F4FB*/
  --button-ghost-disabled: hsla(221, 42%, 93%, 1); /*#E4E9F4*/

  /* TEXT */
  --gray-primary: hsla(0, 0%, 32%, 1); /*#515151*/
  --gray-ring: hsla(0, 0%, 43%, 1); /*#6F6F6F*/
  --gray-secondary: hsla(0, 0%, 50%, 1); /*#7F7F7F*/
  --gray-muted: hsla(0, 0%, 64%, 1); /*#A4A4A4*/
  --gray-highlight: hsla(0, 0%, 100%, 1); /*#FFFFFF*/
  --gray-dark: hsla(0, 0%, 21%, 1); /*#363636*/
  --gray-muted-dark: hsla(0, 0%, 29%, 1); /*#4A4A4A*/
  --black-primary: hsla(240, 6%, 10%, 1); /*#18181B*/
  --gray-slider: hsla(270, 4%, 47%, 1); /*#79747E*/

  /* BACKGROUND */
  --background-blue: hsla(216, 45%, 96%, 1); /*#EFF3F9*/
  --background-primary: hsla(216, 2%, 95%, 1); /*#F1F3F6*/
  --background-white: hsla(0, 0%, 100%, 1); /*#FFFFFF*/
  --background-skeleton: hsla(0, 0%, 95%, 1); /*#F3F3F3*/
  --background-progress-bar: hsla(216, 49%, 93%, 1); /* #E3EAF5 */
  --background-slider: hsla(280, 17%, 90%, 1); /*#E6E0E9*/
  /* ACTION */
  --action-primary: hsla(207, 74%, 50%, 1); /*#3586C8*/
  --action-hover: hsla(207, 71%, 81%, 1); /*#E2F2FF*/
  --action-focus: hsla(207, 28%, 81%, 1); /*#AED3F1*/

  /* DESTRUCTIVE */
  --destructive-primary: hsla(0, 52%, 63%, 1); /*#D86767*/

  /* IN PROCESS */
  --in-process: hsla(33, 89%, 66%, 1); /*#F5AE5A*/
  /* CHECKBOX */

  --border-disabled: hsla(0, 0%, 70%, 1); /*#B3B3B3*/
  --border-table: hsla(0, 0%, 83%, 1); /*#D3D3D3*/
  --border-avatar: hsla(240, 6%, 90%, 1); /*#E4E4E7*/
  --checkbox-purple: hsla(256, 34%, 48%, 1) /*#6750A4*/;
}