## Design Guidelines
* I set up root variables for colors and font sizes and font weight, we should always use them when we need them.
* I have customized bootstrap default colors with new ones
which are exactly the same as **root colors** so we can use them
like the following pattern
```html
btn-{color}, text-{color}, border-{color}
```
Examples of classes to use in bootstrap
```html
btn-primary, btn-danger, text-success,
text-blue, btn-bg-dark, border-border-focus
```
* Of course we still can use root colors in css as usual.
* Please use rem instead of px, we can do that be dividing px value by 16.
* I have set up the font size for heading, so please don't change font of headings.
* If we want to use a specifc heading like h2 but we want it's font to be bigger or smaller, we should try adding classes of headings like .h1, .h2, .h3, .. etc
* I suggest we create one design for inputs and tables and use it in the whole project, maybe it should be a new task. I don't know, let's let Ahmed safi decide that.