@font-face {
  font-family: "SB Sans Text";
  font-style: normal;
  src: url("../fonts/sb/Text/SBSansText-Regular.woff") format("woff");
}

@font-face {
  font-family: "SB Sans Display";
  font-style: normal;
  src: url("../fonts/sb/Display/SBSansDisplay-Regular.woff") format("woff");
}

:root {
    /* BREAKPOINTS */
  /* Phone */
  --bp-sm: 576px;
  /* Tablet */
  --bp-md: 768px;
  /* Laptop/Desktop */
  --bp-custom-desktop: 800px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-xxl: 1400px;

  /* FONTS */
  --font-sans-text: 'SB Sans Text';
  --font-sans-display: 'SB Sans Display';

  /* FONT SIZE */
  --font-size-headline-1: 32px;
  --font-size-headline-2: 20px;
  --font-size-paragraph-regular: 16px;
  --font-size-paragraph-medium: 16px;
  --font-size-description: 14px;
  --font-size-caption: 12px;
  --font-size-button: 12px;
  --font-size-code: 16px;

  --font-size-xl: var(--font-size-headline-2);
  --font-size-l: var(--font-size-paragraph-regular);
  --font-size-m: var(--font-size-description);
  --font-size-s: var(--font-size-caption);

  /* FONT WEIGHT */
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-regular: 500;
  --font-weight-normal: 400;

  /* LINE HEIGHT */
  --line-height-xl: 44px;
  --line-height-l: 28px;
  --line-height-m: 20px;
  --line-height-s: 16px;

  /* COLORS */
  --color-white-0: #FFFFFF;
  --color-dark-1: #151419;
  --color-dark-3: #A2A4B0;
  --color-dark-5: #6C7082;
  --color-dark-6: #51566A;
  --color-dark-8: #1F1E24;
  --color-red-5: #FB4969;
  --color-lemon-3: #E8FE82;
  --color-lemon-4: #CAE864;

  /* VARIABLES */
  --bg-color: var(--color-dark-1);
  --bg-modals: var(--color-dark-8);
  --bg-green: var(--color-lemon-4);
}

h1 {
  font-size: var(--font-size-xl);
  font-family: var(--font-sans-display);
}

p, span {
  font-size: var(--font-size-m);
  font-family: var(--font-sans-text);
}

@media (min-width: 576px) {
}
 
@media (min-width: 768px) {
}
 
@media (min-width: 800px) {
  :root {
    --font-size-xl: var(--font-size-headline-1);
    --font-size-l: var(--font-size-headline-2);
    --font-size-m: var(--font-size-paragraph-regular);
    --font-size-s: var(--font-size-caption);
  }
}
 
@media (min-width: 992px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}