:root {
  --v-color__1: #222;
  --v-color__1--alt1: #444;
  --v-color__1--alt2: #222;
  --v-color__1--alt3: #a6a6a6;
  --v-color__1--alt4: #333;
  --v-color__1--transparent--alt1: rgb(0 0 0 / 40%);

  --v-color__2: #fff;
  --v-color__2--alt2: #f4f4f5;
  --v-color__2--transparent--alt1: rgb(255 255 255 / 70%);

  --v-color__3: #483d8b;
  --v-color__3--400: #6b5fb9;

  --v-transition__default: all 0.2s ease-in-out;

  --v-shadow__xs: rgb(18 25 97 / 8%) 0 1px 4px 0;
  --v-shadow__default: 0 0 20px 5px rgb(0 0 0 / 10%);
  --v-shadow__menu: rgb(0 0 0 / 10%) 0 4px 6px -1px, rgb(0 0 0 / 6%) 0 2px 4px -1px;
  --v-shadow__right: 10px 0px 15px -1px rgb(0 0 0 / 10%);
  --v-shadow__left: -10px 0px 15px -1px rgb(0 0 0 / 10%);
  --v-shadow__bottom: 0px 10px 15px -1px rgb(0 0 0 / 10%);;

  --v-spacing__p: 1rem;
  --v-spacing__sm: 2rem;
  --v-spacing__md: 2rem;
  --v-spacing__lg: 2rem;

  --v-layout__container-padding: 1.3rem;
  --v-layout__container-size--default: 90rem;
  --v-layout__container-size--sm: 60rem;
  --v-layout__container-size--lg: 120rem;

  --v-border-radius__sm: 5px;
  --v-border-radius__md: 10px;
  --v-border-radius__lg: 35px;

  --v-font-family__default: "DM Sans", sans-serif;

  --v-font-weight__default: 400;
  --v-font-weight__default--bold: 700;

  --v-font-size__default: 1rem;
  --v-font-size__h1: 1.8rem;
  --v-font-size__h2: 1.4rem;
  --v-font-size__h3: 1.2rem;
}

@media (min-width: 700px) {
  :root {
    --v-spacing__sm: 2rem;
    --v-spacing__md: 2.5rem;

    --v-font-size__h1: 2.2rem;
    --v-font-size__h2: 1.8rem;
    --v-font-size__h3: 1.4rem;
  }
}

@media (min-width: 1000px) {
  :root {
    --v-spacing__md: 3rem;
  }
}

@media (min-width: 1400px) {
  :root {
    --v-font-size__default: 1.1rem;
    --v-font-size__h1: 2.7rem;
    --v-font-size__h2: 2rem;
    --v-font-size__h3: 1.5rem;

    --v-spacing__md: 4rem;
  }
}

@media (min-width: 1600px) {
  :root {
    --v-font-size__h1: 3.2rem;
  }
}