Styles code improvements, Header component, + Logo component

[emi420]

In this PR I've added some changes to how we use styles.

Also I've worked on the Header component and added a new Logo component.

CSS global variables, Shoelace Classes prefix and design tokens

All color variables were moved to a single hot.css file, so we don't create and repeat more global CSS variables. An ideal solution I think would be to have variables named with the prefix --hot- instead of --sl-l, but this is something that Shoelace doesn't support.

This is different for classes, where I added the hot- prefix for the UnoCSS config, now all classes are prefixed, like hot-font-sans.

I've changed all inline styling and hardcoded values (ex: font-size: 2rem) to classes. This was not possible for Shoelace icons, but in that case I used the CSS variable for font-size.

Header component

I've cleaned the code and also moved all styles and its variants to a new styles.ts file. I'm still exploring the possibility of having all styles in CSS files and use the @apply directive, but this is not possible yet.

Logo component

A new Logo component was added, using SVG files instead of bitmaps.