:root {
  /* PRIMARY */
  --color-primary: rgb(236, 50, 55);                
  --color-primary-hover: rgb(223, 22, 29);

  --color-primary-rgb: 236, 50, 55; 
  --color-primary-hover-rgb: 223, 22, 29;

  --color-primary-soft: rgba(var(--color-primary-rgb), 0.1);
  --color-primary-light: rgba(var(--color-primary-rgb), 0.2);
  --color-primary-medium: rgba(var(--color-primary-rgb), 0.4);


  /*  SECONDARY */
  --color-secondary: rgb(9, 145, 210);
  --color-secondary-hover: rgb(5, 129, 187);

  --color-secondary-rgb: 9, 145, 210;
  --color-secondary-hover-rgb: 5, 129, 187;

  --color-secondary-soft: rgba(var(--color-secondary-rgb), 0.1);
  --color-secondary-light: rgba(var(--color-secondary-rgb), 0.2);
  --color-secondary-medium: rgba(var(--color-secondary-rgb), 0.4);


  /*  TERTIARY */
  --color-tertiary: rgb(255, 241, 18);
  --color-tertiary-hover: rgb(255, 194, 74);

  --color-tertiary-rgb: 255, 241, 18;
  --color-tertiary-hover-rgb: 255, 194, 74;

  --color-tertiary-soft: rgba(var(--color-tertiary-rgb), 0.1);
  --color-tertiary-light: rgba(var(--color-tertiary-rgb), 0.2);
  --color-tertiary-medium: rgba(var(--color-tertiary-rgb), 0.4);


  /* BASE */
  --color-white: #ffffff;
  --color-black: #000000;

  --font-family: "Poppins", sans-serif;

  --gris-claro:#F1F1F1;

  
  --color-gray-light:#e7e7e7;
  
}

body {
  font-family: var(--font-family);
}