:root {
  --theme-font-color: #151515;
  --theme-font-color-inverted: #eaeaea;
  --theme-background-color: #eaeaea;
  --theme-background-color-glass: rgba(234, 234, 234, 0.1);
  --theme-primary-color: #0084f8;
  --theme-negative-color: #ef7678;
  --theme-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
    "Helvetica Neue", sans-serif;
  --theme-font-size-root: 14px;
  --theme-header-height: 80px;
  --theme-nav-width-collapsed: 80px;
  --theme-nav-width: 200px;
  --theme-border-radius: 4px;
  --theme-font-size-sm: 0.8rem;
  --theme-font-size-lg: 1.2rem;
  --theme-margin-lg: 32px;
  --theme-margin-md: 24px;
  --theme-margin-sm: 16px;
  --theme-margin-xs: 8px;
  --theme-padding-lg: 32px;
  --theme-padding-md: 24px;
  --theme-padding-sm: 16px;
  --theme-padding-xs: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --theme-font-color: #eaeaea;
    --theme-font-color-inverted: #eaeaea;
    --theme-background-color: #151515;
  }
}
/* global styles */
body {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: var(--theme-font-family, system-ui);
  color: var(--theme-font-color, #000);
  overflow-y: hidden;
}

body * {
  box-sizing: inherit;
  font-family: inherit;
}

body {
  font-size: var(--theme-font-size-root);
}

[inert] {
  opacity: 0.6;
}