:root {
  --color-primary: #7e52dd;
  --color-secondary: #dd52d6;
  --color-gradient-end: #8457b9;
  --color-text: #151417;
  --color-text-secondary: #747474;
  --color-white: #fff;
  --color-element: #d4d0ff;
  --color-focus: #5d36b3;
  --primary-gradient: linear-gradient(
    90deg,
    var(--color-secondary),
    var(--color-gradient-end)
  );
  --page-background: linear-gradient(
    126deg,
    #f7f6fa 5.58%,
    #f5f4fc 27.79%,
    #f2f2fe 48.29%,
    #f5f4ff 69.65%,
    #fff9ff 94.42%
  );
  --font-body: "Lato", sans-serif;
  --font-heading: "Roboto Flex", sans-serif;
  --container-max: 82.5rem;
  --page-gutter: clamp(0.75rem, 4.1667vw, 3.75rem);
  --radius-small: 0.75rem;
  --shadow-block: 0 0.125rem 0.4375rem rgb(0 0 0 / 7%);
  --shadow-control: 0 0.0625rem 0.125rem rgb(0 0 0 / 34%);
}

@media (max-width: 768px) {
  :root {
    --page-gutter: 0.75rem;
  }
}