@import url('https://fonts.googleapis.com/css?family=Comfortaa:300,400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900&display=swap');

:root {
   /************
       Theme Colors
   ************/
   /* primary */
   --primary: hsl(13, 96%, 61%) !important;
   --ion-color-primary: hsl(13, 96%, 61%) !important;
   --c-primary-lighter-2: hsl(220, 90%, 75%);
   --c-primary-lighter-1: hsl(77, 65%, 50%);
   --c-primary: var(--primary);
   --c-primary-darker-1: hsl(85, 54%, 41%) ;
   --c-primary-darker-2: hsl(220, 90%, 35%);
   /* secondary */
   --secondary:#4c5056 !important;
   --ion-color-secondary: #4c5056 !important;
   --c-secondary-lighter-2: hsl(350, 90%, 75%);
   --c-secondary-lighter-1: hsl(350, 90%, 65%);
   --c-secondary: var(--secondary);
   --c-secondary-darker-1: hsl(165, 79%, 16%);
   --c-secondary-darker-2: hsl(350, 90%, 35%);
   /* basic */
   --c-black: hsl(0, 0%, 0%);
   --c-white: hsl(0,0%,100%);
   --c-gray: hsl(213,6%,35%);
   /************
       Feedback Colors
   ************/
   /* success */
   --c-success-lighter-2: hsl(94, 48%, 75%);
   --c-success-lighter-1: hsl(94, 48%, 65%);
   --c-success: hsl(94, 48%, 55%);
   --c-success-darker-1: hsl(94, 48%, 45%);
   --c-success-darker-2: hsl(94, 48%, 35%);
   /* danger */
   --c-danger-lighter-2: hsl(349, 75%, 70%);
   --c-danger-lighter-1: hsl(349, 75%, 60%);
   --c-danger: hsl(349, 75%, 50%);
   --c-danger-darker-1: hsl(349, 75%, 40%);
   --c-danger-darker-2: hsl(349, 75%, 30%);
   /* warning */
   --c-warning-lighter-2: hsl(46, 100%, 80%);
   --c-warning-lighter-1: hsl(46, 100%, 70%);
   --c-warning: hsl(46, 100%, 60%);
   --c-warning-darker-1: hsl(46, 100%,50%);
   --c-warning-darker-2: hsl(46, 100%, 40%);
   /* info */
   --c-info-lighter-2:  hsl(180, 71%, 75%);
   --c-info-lighter-1:  hsl(180, 71%, 65%);
   --c-info: hsl(180, 71%, 55%);
   --c-info-darker-1:  hsl(180, 71%, 45%);
   --c-info-darker-2:  hsl(180, 71%, 35%);
   /* main heaader */
   --bg-header: hsl(60, 5%, 92%);
   --ff-header-menu: Boston,sans-serif;;
   --fw-header-menu: 400;
   --fs-header-menu: 0.875rem;
   --c-header-menu: hsl(187, 89%, 22%);
   /* Fonts */
   --ff-primary:"Rubik", Sans-serif;
   --ff-sencudary:"Boston", Sans-serif;
   --ff-third:"Roboto", Sans-serif;
   /* main footer */
   --c-footer: hsl(0, 0%, 100%);
   --bg-footer: var(--secondary);
   /* font size text */
   --fs-text-default: 1rem;  /* 16px */
   --fs-text-xxxs: 0.25rem; /* 6px */
   --fs-text-xxs: 0.5rem; /* 8px */
   --fs-text-xs: 0.625rem; /* 10px */
   --fs-text-sm: 0.75rem; /* 12px */
   --fs-text-md: 0.875rem; /* 14px */
   --fs-text-lg: 0.94rem; /* 15px */
   --fs-text-xl: 1.2rem; /* 19px */
   --fs-text-xxl: 1.688rem; /* 27px */
   --fs-text-xxxl: 2rem; /* 32px */
   --fs-text-xxxxl: 2.8rem; /*45px */
   --fs-text-xxxxxl: 5rem; /*80px */
   /*
   TODO: make the fonts following the CodyHouse way
   /* fonts * /
   --fs-base: 1rem;
   --fs-scale-ratio: 1.25;
   /* primary * /
   --ff-primary: '';
   --fs-primary: 1rem;
   --fw-primary: 400;
   --lh-primary: 1.5rem;
   /* heading * /
   --ff-heading: '';
   --fs-heading: 1rem;
   --fw-heading: 400;
   --lh-heading: 1.5rem;
   */
}