:root {
/* Gutenberg color definitions */
	--primary-color: #ED1C24;
	--primary-color-hue: #C61018;
	--secondary-color: #F26617;
	--secondary-color-hue: #C74F13;
	--third-color: #99C200;
	--third-color-hue: #7A9B00;
	--fourth-color: #4e42d4;
	--fourth-color-hue:#2F2E41;
	--success-color: #3adb76;
	--warning-color: #ffae00;
	--alert-color: #ec5840;
	--light-gray: #f6f6f6;
	--medium-gray: #888;
	--dark-gray: #555555;
	--black: #000;
	--black-hue:#3F3D56;
	--white: #ffffff;

  /* Default (XS / mobil) */
  --fs-xxs: 12px;
  --fs-xs: 16px;
  --fs-s: 16px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-xl: 20px;
  --fs-xxl: 24px;
  --fs-xxxl: 40px;
  --fs-xxxxl: 40px;

  /* Line-height baserat på 4px grid */
  --lh-tight: 1.25; /* rubriker */
  --lh-base: 1.5;   /* brödtext */
  --lh-loose: 1.75; /* längre texter */

  /* Fluid Spacing (4px grid) */
  --s-xs: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);   /* 8–16px */
  --s-sm: clamp(0.75rem, 0.6rem + 0.8vw, 1.5rem); /* 12–24px */
  --s-md: clamp(1rem, 0.8rem + 1vw, 2rem);       /* 16–32px */
  --s-lg: clamp(1.5rem, 1rem + 2vw, 3rem);       /* 24–48px */
  --s-xl: clamp(2rem, 1.5rem + 3vw, 4rem);       /* 32–64px */
  --s-xxl: clamp(3rem, 2rem + 4vw, 6rem);        /* 48–96px */

  /* Overwrite Wordpress Spacing */
  --wp--preset--spacing--xs: var(--s-xs);
  --wp--preset--spacing--sm: var(--s-sm);
  --wp--preset--spacing--md: var(--s-md);
  --wp--preset--spacing--lg: var(--s-lg);
  --wp--preset--spacing--xl: var(--s-xl);
  --wp--preset--spacing--xxl: var(--s-xxl);

  /* Fluid border-radius */
  --global-radius: clamp(0.5rem, 0.5rem + 0.5vw, 1rem); /* från ca 8px → 16px */

  /* Logo */
  --logo-height: clamp(32px, 5vw, 44px);
}

/* SM: 576px+ */
@media (min-width: 400px) {
	:root {
		/* Product Category Slider Wdth */
		--product-category-slider-width: calc((100% / 1.5));
	}
}

/* SM: 576px+ */
@media (min-width: 576px) {
  :root {
    --fs-xxs: 13px;
    --fs-xs: 16px;
    --fs-s: 16px;
    --fs-base: 16px;
    --fs-md: 18px;
    --fs-lg: 20px;
    --fs-xl: 24px;
    --fs-xxl: 28px;
    --fs-xxxl: 44px;
    --fs-xxxxl: 44px;

	/* Product Category Slider Wdth */
	--product-category-slider-width: calc((100% / 2.25));
	--case-slider-width: calc((100% / 1.5));
  }
}

/* MD: 768px+ */
@media (min-width: 768px) {
  :root {
    --fs-xxs: 14px;
    --fs-xs: 16px;
    --fs-s: 16px;
    --fs-base: 16px;
    --fs-md: 20px;
    --fs-lg: 22px;
    --fs-xl: 28px;
    --fs-xxl: 32px;
    --fs-xxxl: 50px;
    --fs-xxxxl: 50px;

	/* Product Category Slider Wdth */
	--product-category-slider-width: calc((100% / 2.5));
	--case-slider-width: calc((100% / 2.25));
  }
}

/* LG: 992px+ */
@media (min-width: 992px) {
  :root {
    --fs-xxs: 14px;
    --fs-xs: 16px;
    --fs-s: 18px;
    --fs-base: 18px;
    --fs-md: 20px;
    --fs-lg: 24px;
    --fs-xl: 28px;
    --fs-xxl: 40px;
    --fs-xxxl: 60px;
    --fs-xxxxl: 60px;
  }
}



/* XXL: 1200px+ */
@media (min-width: 1200px) {
	:root {
		/* Product Category Slider Wdth */
		--product-category-slider-width: calc((100% / 3.5));
	}
}

/* XXL: 1400px+ */
@media (min-width: 1600px) {
    :root {
      --fs-xxs: 14px;
      --fs-xs: 16px;
      --fs-s: 18px;
      --fs-base: 20px;
      --fs-md: 22px;
      --fs-lg: 24px;
      --fs-xl: 32px;
      --fs-xxl: 40px;
      --fs-xxxl: 80px;
      --fs-xxxxl: 80px;

  } 
}

/* exo-2-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: 'Exo 2';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/exo-2-v26-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* exo-2-italic - 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: 'Exo 2';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/exo-2-v26-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* exo-2-600 - 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: 'Exo 2';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/exo-2-v26-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* exo-2-600italic - 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: 'Exo 2';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/exo-2-v26-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* exo-2-700 - 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: 'Exo 2';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/exo-2-v26-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* exo-2-700italic - 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: 'Exo 2';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/exo-2-v26-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}