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

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

  color-scheme: light dark;
  /* accent */
  --green: 141;
  --accent-400: var(--green) 100 67;
  --accent-500: var(--green) 100 57;
  --accent-600: var(--green) 98 50;

  /* secondary */
  --blue: 224;
  --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: 194;
  --bg-400: var(--white) 33 100;
  --bg-500: var(--white) 12 96;
  --bg-600: var(--white) 12 76;
  --bg-700: var(--white) 12 56;
  --bg-800: var(--white) 12 36;
  --bg-900: var(--white) 12 16;
}

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

  /* secondary */
  --white: 194;
  --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: 224;
  --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 */
  --prop-color: 350 78 70;
  --prop-link-color: 350 78 60;
  --func-color: 50 78 70;
  --func-link-color: 50 78 60;
  --signal-color: 270 78 70;
  --signal-link-color: 270 85 60;
  --var-color: 190 78 70;
  --var-link-color: 190 85 60;
  --inner-param-color: 215 60 70;
}

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