@import-normalize;

@font-face {
  font-display: fallback;
  font-family: 'Archivo Narrow';
  src: url('@fontsource/archivo-narrow/files/archivo-narrow-latin-400-normal.woff2');
}

:root {
  --gap-px: 2px;
  /* upper limit is 4px because the popup size is limited to 800x600, and we need to save space */
  --gap-rem: min(0.125rem, 4px);
  --gap-rem-2x: calc(var(--gap-rem) * 2);
  --gap-rem-3x: calc(var(--gap-rem) * 3);
  --gap-rem-4x: calc(var(--gap-rem) * 4);
  --highlight-level1: #eee;
  --highlight-level2: #e0e0e0;
  --highlight-level3: #bdbdbd;
  --highlight-level4: #9e9e9e;
  --highlight-level5: #757575;
  --bg-color: #fff;
  --main-color1: #42a5f5;
  --main-color2: #ff9800;
  --main-color3: #26a69a;
  --main-color4: #f44336;
  --main-color5: #8d6e63;
  --main-font-color: #212121;

  background-color: var(--bg-color);
  color: var(--main-font-color);
  font-family: system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --highlight-level1: #424242;
    --highlight-level2: #616161;
    --highlight-level3: #757575;
    --highlight-level4: #9e9e9e;
    --highlight-level5: #bdbdbd;
    --bg-color: #212121;
    --main-font-color: #fff;
  }
}

body {
  margin: 0;
  font-family: inherit; /* use the font-family set from :root or html tag */
}

[hidden] {
  display: none !important;
}
