<template>
  <div id="app">
    <Header />
    <RouterView />
    <Navigation />
  </div>
</template>

<script setup lang='ts'>
import Header from './components/Sections/Header.vue'
import Navigation from './components/Sections/Navigation.vue'
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --clr-white: #ffffff;
  --clr-black: #000000;

  --clr-neutral: #595959;
  --clr-neutral-contrast: #ffffff;

  --clr-success: #009933;
  --clr-success-contrast: #ffffff;
  --clr-error: #851919;
  --clr-error-contrast: #ffffff;

  --clr-happy-dark: #009933;
  --clr-happy-light: #d1ffe8;

  --clr-sad-dark: #252ed5;
  --clr-sad-light: #e5ecfc;

  --clr-disappointed-dark: #ab6b0e;
  --clr-disappointed-light: #fffbd8;

  --clr-angry-dark: #851919;
  --clr-angry-light: #ffe5e5;

  --clr-empty-dark: #595959;
  --clr-empty-light: #f1f1f1;

  --clr-dead-dark: #ffffff;
  --clr-dead-light: #000000;

  --clr-sick-dark: #87ad00;
  --clr-sick-light: #edffd8;

  --clr-pissed-dark: #7853ff;
  --clr-pissed-light: #f1efff;

  --clr-current-dark: var(--clr-happy-dark);
  --clr-current-light: var(--clr-happy-light);

  /* Font Sizes & Scaling Factor*/
  --scaling-factor: 1.25;
  --font-size-xs: calc(var(--font-size-s) / var(--scaling-factor));
  --font-size-s: calc(var(--font-size-default) / var(--scaling-factor));
  --font-size-default: 1rem;
  --font-size-l: calc(var(--font-size-default) * var(--scaling-factor));
  --font-size-xl: calc(var(--font-size-l) * var(--scaling-factor));
  --font-size-xxl: calc(var(--font-size-xl) * var(--scaling-factor));

  /* Paddings depend on Font-Size */
  --padding-xxs: calc(var(--padding-xs) / var(--scaling-factor));
  --padding-xs: calc(var(--padding-s) / var(--scaling-factor));
  --padding-default: var(--font-size-default);
  --padding-s: calc(var(--padding-default) / var(--scaling-factor));
  --padding-l: calc(var(--padding-default) * var(--scaling-factor));
  --padding-xl: calc(var(--padding-l) * var(--scaling-factor));
  --padding-xxl: calc(var(--padding-xl) * var(--scaling-factor));

  --radius-default: calc(var(--font-size-default) / 3);
  --radius-border: var(--font-size-default);

  --transition-default: 150ms;

  --box-shadow-z2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

body {
  font-family: 'Roboto', sans-serif;
  background-color: var(--clr-white);
  color: var(--clr-black);
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  & > *:nth-child(2) { flex: 1; }
}
</style>