html {
  font-family: "Rubik Variable", Inter, system-ui, Avenir, Helvetica, Arial,
    sans-serif;
  font-size: 14px;
  line-height: 1.272;
  font-weight: 400;

  height: 100svh;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  color-scheme: light dark;
  /* accent */
  --green: 141deg;
  --accent-400: var(--green) 90% 57%;
  --accent-500: var(--green) 90% 47%;
  --accent-600: var(--green) 88% 40%;
  --accent-700: var(--green) 70% 40%;

  /* secondary */
  --blue: 224deg;
  --secondary-400: var(--blue) 100% 68%;
  --secondary-500: var(--blue) 100% 58%;
  --secondary-600: var(--blue) 53% 41%;
  --secondary-700: var(--blue) 43% 31%;
  --secondary-800: var(--blue) 23% 21%;
  --secondary-900: var(--blue) 44% 7%;

  /* primary */
  --white: 194deg;
  --bg-400: var(--white) 10% 95%;
  --bg-500: var(--white) 5% 90%;
  --bg-600: var(--white) 5% 76%;
  --bg-700: var(--white) 5% 56%;
  --bg-800: var(--white) 5% 36%;
  --bg-900: var(--white) 5% 16%;

  /* docs */
  --background: var(--bg-500);
  --text: var(--white) 0% 0%;
  --text-dark: var(--white) 0% 18%;
  --text-darker: var(--white) 0% 30%;
  --link: var(--green) 48% 40%;
  --toc-link: var(--green) 74% 30%;
  --toc-link-active: var(--green) 80% 38%;
  --prop-color: 350deg 78% 70%;
  --prop-link-color: 350deg 78% 60%;
  --func-color: 50deg 68% 50%;
  --func-link-color: 50deg 58% 55%;
  --signal-color: 270deg 78% 70%;
  --signal-link-color: 270deg 85% 60%;
  --var-color: 190deg 78% 70%;
  --var-link-color: 190deg 85% 60%;
  --inner-param-color: 215deg 80% 27%;
  --inner-param-border-color: 215deg 50% 50%;
  --nav-hovered-bkg: var(--blue) 100% 87%;
  --nav-hovered-weak-bkg: var(--blue) 100% 91%;
  --nav-selected-bkg: var(--blue) 100% 90%;
  --nav-selected-hovered-bkg: var(--blue) 100% 85%;
  --nav-selected-text: var(--blue) 60% 60%;
  --nav-indicator-bkg: var(--blue) 45% 80%;
  --toc-hovered-bkg: 0deg 0% 0% / 0.1;
  --overlay-bkg: var(--blue) 25% 93%;
  --overlay-bkg-border: var(--blue) 10% 75%;
  --footer-bkg: var(--blue) 8% 87%;
  --footer-bkg-border: var(--blue) 32% 84%;
}

html.dark {
  /* accent */
  --green: 141deg;
  --accent-400: var(--green) 100% 67%;
  --accent-500: var(--green) 95% 55%;
  --accent-600: var(--green) 90% 40%;
  --accent-700: var(--green) 80% 30%;

  /* secondary */
  --white: 194deg;
  --secondary-400: var(--white) 33% 100%;
  --secondary-500: var(--white) 33% 96%;
  --secondary-600: var(--white) 33% 76%;
  --secondary-700: var(--white) 33% 56%;
  --secondary-800: var(--white) 35% 36%;
  --secondary-900: var(--white) 44% 7%;

  /* primary */
  --blue: 224deg;
  --bg-400: var(--blue) 90% 65%;
  --bg-500: var(--blue) 83% 45%;
  --bg-700: var(--blue) 82% 25%;
  --bg-800: var(--blue) 82% 15%;
  --bg-900: var(--blue) 82% 3%;

  /* docs */
  --background: var(--bg-900);
  --text: var(--white) 0% 100%;
  --text-dark: var(--white) 0% 70%;
  --text-darker: var(--white) 0% 40%;
  --link: var(--green) 60% 44%;
  --toc-link: var(--green) 74% 40%;
  --toc-link-active: var(--green) 80% 60%;
  --prop-color: 350deg 78% 70%;
  --prop-link-color: 350deg 78% 60%;
  --func-color: 50deg 78% 70%;
  --func-link-color: 50deg 78% 60%;
  --signal-color: 270deg 78% 70%;
  --signal-link-color: 270deg 85% 60%;
  --var-color: 190deg 78% 70%;
  --var-link-color: 190deg 85% 60%;
  --inner-param-color: 215deg 60% 70%;
  --inner-param-border-color: 215deg 26% 46%;
  --inner-param-color: 215deg 60% 70%;
  --nav-hovered-bkg: var(--blue) 40% 10%;
  --nav-hovered-weak-bkg: var(--blue) 35% 8%;
  --nav-selected-bkg: var(--blue) 40% 13%;
  --nav-selected-hovered-bkg: var(--blue) 40% 17%;
  --nav-selected-text: var(--blue) 100% 70%;
  --nav-indicator-bkg: var(--blue) 30% 30%;
  --toc-hovered-bkg: 0deg 0% 100% / 0.07;
  --overlay-bkg: var(--blue) 75% 5%;
  --overlay-bkg-border: var(--blue) 45% 15%;
  --footer-bkg: var(--blue) 66% 5%;
  --footer-bkg-border: var(--blue) 75% 21%;
}

* {
  box-sizing: border-box;
  position: relative;
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}