@import url('./styles/themes/default-light.css');
@import url('./styles/themes/default-dark.css');
@import url('./styles/toolbars.css');
@import url('./styles/forms.css');
@import url('./styles/inputs.css');
@import url('./styles/buttons.css');

:root {
  --font-size: 12px;

  --text-color: var(--gray1);
  --text-secondary-color: var(--gray5);
  --link-color: var(--blue);

  --background-body-color: var(--gray11);
  --background-color: var(--gray11);

  --color-accent-primary:  var(--blue);
  --color-accent-secondary: var(--gray7);
  --color-accent-light: var(--gray10);

  --overlay-color: rgba(var(--overlay-color-rgb), 0.2);

  --transition-duration: .3s;

  --border-color: var(--gray7);
  --border-radius: .3rem;
  --border-width: 1px;
  --shadow-light: 0 0 10px rgba(0, 0, 0, 0.1);

  --header-width: 800px;
  --header-height: 4rem;
  --header-text-color: var(--gray1);

  --toolbar-height: calc(1.5rem + 2rem);

  --livre-journal-max-height: calc(100% - var(--toolbar-height));

  --button-height: 1.5rem;

  --menu-background-color: var(--background-color, rgb(242, 242, 247));
}

html,
body {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: var(--font-size);
  color: var(--text-color);
  background-color: var(--background-body-color);

  margin: 0;
  padding: 0;

  position: relative;
}

header {
  box-sizing: border-box;
  height: var(--header-height);
}

#page-container {
  box-sizing: border-box;
  height: calc(100% - var(--header-height));
  width: 100%;
  padding: 2rem;
}

@media screen and (max-width: 800px) {
  #page-container {
    padding: 1rem;
  }
}

a {
  color: var(--link-color);
  text-decoration: none;
}