body {
  margin: 0;
  line-height: normal;
}

:root {
  /* fonts */
  --font-roboto: Roboto;
  --font-sf-pro: "SF Pro";

  /* font sizes */
  --font-size-sm: 14px;
  --font-size-xs: 12px;
  --font-size-mid: 17px;
  --font-size-xl: 20px;
  --font-size-5xl: 24px;
  --font-size-11xl: 30px;
  --font-size-mini: 15px;
  --font-size-lg: 18px;
  --font-size-35xl: 54px;

  /* Colors */
  --native-button-text-color: #fff;
  --grays-gray-2: #aeaeb2;
  --color-lightsteelblue: #b7c0d9;
  --native-button-color: #007aff;
  --vibrant-labels-vibrant-primary: #000;
  --colors-green: #34c759;
  --custom-outline: rgba(0, 0, 0, 0.05);
  --custom-plain-foreground: rgba(0, 0, 0, 0.8);
  --native-hint-color: #707579;
  --grays-gray-6: #f2f2f7;
  --neutral-300: #eff0f7;
  --miscellaneous-kit-section-fill: #f5f5f5;

  /* Gaps */
  --gap-xl: 20px;
  --gap-11xl: 30px;
  --gap-3xs: 10px;
  --gap-8xs: 5px;
  --gap-7xs: 6px;
  --gap-31xl: 50px;
  --gap-5xs: 8px;
  --gap-base: 16px;
  --gap-4xs: 9px;

  /* Paddings */
  --padding-xl: 20px;
  --padding-mini: 15px;
  --padding-xs: 12px;
  --padding-3xs: 10px;
  --padding-5xs: 8px;
  --padding-21xl: 40px;


  /* Border radiuses */
  --br-3xs: 10px;
  --br-81xl: 100px;
  --br-base: 16px;
  --br-xl: 20px;

  /* Effects */
  --general-shadow-02: 0px 2px 12px rgba(20, 20, 43, 0.08);
}