:root{
    --clr-accent-400: hsl(25, 100%, 62%);
    --clr-accent-500: hsl(212, 100%, 62%);

    --clr-text-100: hsl(0, 0%, 100%);
    --clr-text-200: hsl(25, 100%, 62%);
    --clr-text-300: hsl(0, 1%, 4%);

    --clr-button-100: hsl(25, 100%, 62%);
    --clr-button-200: hsl(212, 100%, 62%);
    --clr-button-300: hsl(0, 0%, 1%);

    --clr-bg-100: hsl(0, 0%, 100%);
    --clr-bg-200: hsl(0, 1%, 4%);
    --clr-bg-300: hsl(0, 1%, 10%);
    --clr-bg-400: hsl(0, 1%, 14%);

    --clr-card-100: hsl(0, 0%, 1%);
    --clr-card-200: hsl(0, 0%, 14%);



    /* font-family */
--ff-primary: 'Poppins', sans-serif;
--ff-secondary: 'Rambla', sans-serif;
--ff-body: var(--ff-primary);
--ff-heading: var(--ff-secondary);

  /* font-weight */
  --fw-regular: 400;
  --fw-semibold: 500;
  --fw-bold: 700;


   /* font size */

   --fs-300:0.8125rem;     /*13px   specific for button in website-stay same in all devices*/
   --fs-400:0.875rem;      /*14px  in small devices for paragraph*/
   --fs-500:0.9375rem;     /*15px  in small devices for paragraph and navbar*/

   --fs-600:1rem;          /*16px  in small devices for paragraph*/
   --fs-700:1.875rem;      /*30px  in small devices for heading but not specific*/
   --fs-800:2.5rem;        /*40px  in small devices for heading but not specific*/

   --fs-900:3.5rem;        /*56px  in small devices for heading*/


       /* basic size to manuplate */

       --fs-body:var(--fs-400);
       --fs-primary-heading: var(--fs-900);
       --fs-nav: var(--fs-500);
       --fs-button: var(--fs-300);
       --fs-secondary-heading: var(--fs-700);
   
   
   
       --size-100: .25rem;
       --size-200: .5rem;
       --size-300: .75rem;
       --size-400: 1rem;
       --size-500: 1.5rem;
       --size-600: 2rem;
       --size-700: 3rem;
       --size-800: 4rem;
       --size-900: 5rem;

       --padding-left-right: 0 3.75rem 0;
   
}

   /* media query for larger screen */

   @media (min-width: 50em) {
    :root{
        --fs-body: var(--fs-500);
        --fs-primary-heading: var(--fs-900);
        --fs-nav: var(--fs-300);
        --fs-secondary-heading: var(--fs-800);
    }
}