:root{

  /* HSL Colors variation */

  --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
  --color-primary-light: hsl(var(--color-primary-h), var(--color-primary-s), calc(var(--color-primary-l) * 1.08) );
  --color-primary-lighter: hsl(var(--color-primary-h), var(--color-primary-s), calc(var(--color-primary-l) * 1.12) );
  --color-primary-dark: hsl(var(--color-primary-h), var(--color-primary-s), calc(var(--color-primary-l) * 0.92) );
  --color-primary-darker: hsl(var(--color-primary-h), var(--color-primary-s), calc(var(--color-primary-l) * 0.88) );
  --color-primary-10: hsla( var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.10);
  --color-primary-25: hsla( var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.25);
  --color-primary-50: hsla( var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.50);
  --color-primary-75: hsla( var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.75);
  --color-primary-90: hsla( var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.90);
  
  --color-secondary: hsl( var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l) );
  --color-secondary-light: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) * 1.08) );
  --color-secondary-lighter: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) * 1.12) );
  --color-secondary-dark: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) * 0.92) );
  --color-secondary-darker: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) * 0.88) );
  --color-secondary-10: hsla( var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l), 0.10);
  --color-secondary-25: hsla( var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l), 0.25);
  --color-secondary-50: hsla( var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l), 0.50);
  --color-secondary-75: hsla( var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l), 0.75);
  --color-secondary-90: hsla( var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l), 0.90);
  
  --color-accent: hsl( var(--color-accent-h), var(--color-accent-s), var(--color-accent-l) );
  --color-accent-light: hsl(var(--color-accent-h), var(--color-accent-s), calc(var(--color-accent-l) * 1.08) );
  --color-accent-lighter: hsl(var(--color-accent-h), var(--color-accent-s), calc(var(--color-accent-l) * 1.12) );
  --color-accent-dark: hsl(var(--color-accent-h), var(--color-accent-s), calc(var(--color-accent-l) * 0.92) );
  --color-accent-darker: hsl(var(--color-accent-h), var(--color-accent-s), calc(var(--color-accent-l) * 0.88) );
  --color-accent-10: hsla( var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.10);
  --color-accent-25: hsla( var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.25);
  --color-accent-50: hsla( var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.50);
  --color-accent-75: hsla( var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.75);
  --color-accent-90: hsla( var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.90);
  
  --color-grey: hsl( var(--color-grey-h), var(--color-grey-s), var(--color-grey-l) );
  --color-grey-light: hsl(var(--color-grey-h), var(--color-grey-s), calc(var(--color-grey-l) * 1.08) );
  --color-grey-lighter: hsl(var(--color-grey-h), var(--color-grey-s), calc(var(--color-grey-l) * 1.12) );
  --color-grey-dark: hsl(var(--color-grey-h), var(--color-grey-s), calc(var(--color-grey-l) * 0.92) );
  --color-grey-darker: hsl(var(--color-grey-h), var(--color-grey-s), calc(var(--color-grey-l) * 0.88) );
  --color-grey-10: hsla( var(--color-grey-h), var(--color-grey-s), var(--color-grey-l), 0.10);
  --color-grey-25: hsla( var(--color-grey-h), var(--color-grey-s), var(--color-grey-l), 0.25);
  --color-grey-50: hsla( var(--color-grey-h), var(--color-grey-s), var(--color-grey-l), 0.50);
  --color-grey-75: hsla( var(--color-grey-h), var(--color-grey-s), var(--color-grey-l), 0.75);
  --color-grey-90: hsla( var(--color-grey-h), var(--color-grey-s), var(--color-grey-l), 0.90);
  
  --color-light-grey: hsl( var(--color-light-grey-h), var(--color-light-grey-s), var(--color-light-grey-l) );
  --color-light-grey-light: hsl(var(--color-light-grey-h), var(--color-light-grey-s), calc(var(--color-light-grey-l) * 1.08) );
  --color-light-grey-lighter: hsl(var(--color-light-grey-h), var(--color-light-grey-s), calc(var(--color-light-grey-l) * 1.12) );
  --color-light-grey-dark: hsl(var(--color-light-grey-h), var(--color-light-grey-s), calc(var(--color-light-grey-l) * 0.92) );
  --color-light-grey-darker: hsl(var(--color-light-grey-h), var(--color-light-grey-s), calc(var(--color-light-grey-l) * 0.88) );
  
  --color-dark-grey: hsl( var(--color-dark-grey-h), var(--color-dark-grey-s), var(--color-dark-grey-l) );
  --color-dark-grey-light: hsl(var(--color-dark-grey-h), var(--color-dark-grey-s), calc(var(--color-dark-grey-l) * 1.08) );
  --color-dark-grey-lighter: hsl(var(--color-dark-grey-h), var(--color-dark-grey-s), calc(var(--color-dark-grey-l) * 1.12) );
  --color-dark-grey-dark: hsl(var(--color-dark-grey-h), var(--color-dark-grey-s), calc(var(--color-dark-grey-l) * 0.92) );
  --color-dark-grey-darker: hsl(var(--color-dark-grey-h), var(--color-dark-grey-s), calc(var(--color-dark-grey-l) * 0.88) );
  
  --color-success: hsl( var(--color-success-h), var(--color-success-s), var(--color-success-l) );
  --color-success-dark: hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) * 0.92) );
  
  --color-warning: hsl( var(--color-warning-h), var(--color-warning-s), var(--color-warning-l) );
  --color-warning-dark: hsl(var(--color-warning-h), var(--color-warning-s), calc(var(--color-warning-l) * 0.92) );
  
  --color-error: hsl( var(--color-error-h), var(--color-error-s), var(--color-error-l) );
  --color-error-dark: hsl(var(--color-error-h), var(--color-error-s), calc(var(--color-error-l) * 0.92) );
  
  --color-danger: hsl( var(--color-danger-h), var(--color-danger-s), var(--color-danger-l) );
  --color-danger-dark: hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) * 0.92) );
  
  --color-info: hsl( var(--color-info-h), var(--color-info-s), var(--color-info-l) );
  --color-info-dark: hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) * 0.92) );
  
  /* Hexadecimal Colors variation*/
  
  --color-white-05: rgba(var(--color-white), 0.05);
  --color-white-10: rgba(var(--color-white), 0.10);
  --color-white-20: rgba(var(--color-white), 0.20);
  --color-white-50: rgba(var(--color-white), 0.50);
  --color-white-80: rgba(var(--color-white), 0.80);
  --color-white-95: rgba(var(--color-white), 0.95);
  
  --color-black-05: rgba(var(--color-black), 0.05);
  --color-black-10: rgba(var(--color-black), 0.10);
  --color-black-20: rgba(var(--color-black), 0.20);
  --color-black-50: rgba(var(--color-black), 0.50);
  --color-black-80: rgba(var(--color-black), 0.80);
  --color-black-95: rgba(var(--color-black), 0.95);
  }