@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-BoldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-main: "Roboto", Arial, Helvetica, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --fs-h1: 38px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body: 17px;
  --fs-subtitle: 20px;
  --fs-overline: 14px;
  --fs-small: 15px;

  --lh-h1: 1.1;
  --lh-h2: 1.15;
  --lh-h3: 1.2;
  --lh-h4: 1.25;
  --lh-body: 1.35;
  --lh-subtitle: 1.3;
  --lh-overline: 1.2;
  --lh-small: 1.3;

  --ls-tight: -0.03em;
  --ls-normal: 0;
  --ls-wide: 0.04em;

  --color-text: #111111;
  --color-accent: #9e0929;
  --color-muted: #1e1e1e;
  --color-bg-soft: #f7f7f7;
  --color-white: #ffffff;
  --color-border: #d9d9d9;

  --radius: 40px;

  --container-max: 1920px;
  --side-pad: 120px;
}