<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;
  -webkit-tap-highlight-color: transparent;
}

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

  --clr-disabled: #dcdcdc;
  --clr-disabled-contrast: #636363;

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

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

  --clr-happy-dark: #007822;
  --clr-happy-light: #eefff4;

  --clr-relaxed-dark: #0093c1;
  --clr-relaxed-light: #E5F9FF;

  --clr-content-dark: #499009;
  --clr-content-light: #F1FAEA;

  --clr-sad-dark: #001f88;
  --clr-sad-light: #ECEFF7;

  --clr-angry-dark: #840b15;
  --clr-angry-light: #FDE7E9;

  --clr-disappointed-dark: #8c0095;
  --clr-disappointed-light: #fce2ff;

  --clr-empty-dark: #262626;
  --clr-empty-light: #F2F2F2;

  --clr-scared-dark: #c35700;
  --clr-scared-light: #FFEAE5;

  --clr-nervous-dark: #b6820f;
  --clr-nervous-light: #FFF7E5;

  --clr-panic-dark: #3F0D10;
  --clr-panic-light: #f0e9ea;

  --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));
  --font-size-xxxl: calc(var(--font-size-xxl) * 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>