/* chelsea-market-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Chelsea Market';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/chelsea-market-v14-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* catamaran-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Catamaran';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/catamaran-v28-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
    --color-primary: #EFEA76;
    --color-secondary: #fbf8b1;
    --color-dark: #333333;
    --color-grey: #e5e5e5;
    --color-white: #ffffff;
    --color-black: #000000;

    --font-catamaran: "Catamaran", sans-serif;
    --font-chelsea: "Chelsea Market", system-ui;
    --font-univers: system-ui;

    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;

    --font-size-xs: clamp(12px, 1vw, 14px);
    --font-size-s: clamp(16px, 1.28vw, 18px);
    --font-size-m: clamp(18px, 2vw, 22px);
    --font-size-xm: clamp(24px, 2.25vw, 25px);
    --font-size-l: clamp(25px, 2.7vw, 30px);
    --font-size-xl: clamp(26px, 3.2vw, 42px);
    --font-size-xxl: clamp(30px, 3.7vw, 58px);

    --line-height-xs: clamp(16px, 1.1vw, 19px);
    --line-height-s: clamp(18px, 1.5vw, 24px);
    --line-height-m: clamp(22px, 1.95vw, 26px);
    --line-height-xm: clamp(28px, 2.5vw, 30px);
    --line-height-l: clamp(32px, 2.9vw, 40px);
    --line-height-xl: clamp(34px, 3.7vw, 58px);
    --line-height-xxl: clamp(36px, 4vw, 70px);

    --space-xxsmall: clamp(2px, 1vw, 3px);
    --space-xsmall: clamp(4px, 1.5vw, 10px);
    --space-small: clamp(10px, 3vw, 40px);
    --space-medium: clamp(12px, 10vw, 210px);
    --space-large: clamp(14px, 10vw, 188px);
    --space-xlarge: clamp(28px, 14vw, 210px);

    --header-height : auto;
}
@media screen and (max-width: 767px) {
    :root {
        --space-medium: clamp(12px, 5vw, 210px);
    }
}