*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --device: mobile;
  --loading: false;
  --page-bg: var(--brand-10);
  --page-color: var(--black-50);
  --page-header-height: 60px;
  --page-footer-height: 40px;
}

@media (max-width: 768px) {
  :root {
    --device: mobile;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --device: tablet;
  }
}

@media (min-width: 1025px) {
  :root {
    --device: desktop;
  }
}

body {
  --bg: var(--page-bg);
  --color: var(--page-color);

  margin: 0;

  font-family: var(--font-sans);

  color: var(--color);
  background-color: var(--bg);
}

.page-content {
  min-height: calc(100svh - var(--page-header-height) - var(--page-footer-height));
}

.typography::selection {
  background-color: var(--brand-40);
  color: var(--black-40);
}