/* vars */

:root {
  /* color */
  --color-white: rgb(230 231 237);
  --color-black: rgb(52 59 88);
  --color-dark-grey: rgb(88 93 118);

  /* theme */
  body:not([data-theme]),
  body[data-theme="light"] {
    --color-bg: var(--color-white);
    --color-txt-primary: var(--color-black);
    --color-txt-secondary: var(--color-dark-grey);
  }

  /* font */
  --font-family-mono: Roboto Mono, monospace;
  --font-sz-xs: 12px;
  --font-sz-sm: 14px;
  --font-sz-md: 16px;
  --font-sz-lg: 18px;
  --font-sz-xl: 24px;
  --font-sz-xxl: 32px;
}

/* global default styles */

:root {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body {
  color: var(--color-txt-primary);
  background-color: var(--color-bg);

  font-family: var(--font-family-mono);
  font-size: var(--font-sz-md);
  font-weight: normal;
  line-height: 1.4;
  text-rendering: optimizeLegibility;
}

h1 {
  font-size: var(--font-sz-xxl);
}

h2 {
  font-size: var(--font-sz-xl);
}

h3,
h4,
h5,
h6 {
  font-size: var(--font-sz-lg);
}

a {
  transition:
    text-decoration-color 80ms,
    color 80ms;
  text-underline-offset: 0.2rem;
}

a:link,
a:visited {
  color: unset;
}

a:hover,
a:focus {
  color: var(--color-txt-secondary);
  text-decoration-color: transparent;
}

code {
  padding: 1px;
  background-color: rgb(
    from var(--color-bg) calc(r * 0.95) calc(g * 0.95) calc(b * 0.95)
  );
  border-radius: 10%;
}

li::marker {
  content: "- " / "";
}

p {
  margin-top: 1rlh;
  margin-bottom: 1rlh;
}

/* utility classes */

.text-primary {
  font-size: var(--font-sz-md);
  color: var(--color-txt-primary);
}

.text-secondary {
  font-size: var(--font-sz-sm);
  color: var(--color-txt-secondary);
}

.text-xs {
  font-size: var(--font-sz-xs);
}

.text-sm {
  font-size: var(--font-sz-sm);
}

.text-md {
  font-size: var(--font-sz-md);
}

@font-face {
  font-display: swap;
  font-family: "Roboto Mono";
  font-style: normal;
  src: url("/static/roboto-mono-v31-latin-regular.woff2") format("woff2");
}