@import url("https://fonts.googleapis.com/css2?family=Long+Cang&family=Yuji+Syuku&display=swap");
:root {
    /* ===================
   COLORS, SPACING AND DESIGN
   =================== */
  --max-width: 120rem;

  /* Avstånd rem-system */
  --spacing-unit: 1rem; /* Basenhet */
  --spacing-xs: calc(var(--spacing-unit) * 0.5); /* 1rem */
  --spacing-s: calc(var(--spacing-unit) * 1); /* 1rem */
  --spacing-m: calc(var(--spacing-unit) * 2); /* 2rem */
  --spacing-ml: calc(var(--spacing-unit) * 3); /* 3rem */
  --spacing-l: calc(var(--spacing-unit) * 4); /* 4rem */
  --spacing-xl: calc(var(--spacing-unit) * 8); /* 8rem */
  --spacing-xxl: calc(var(--spacing-unit) * 12); /* 12rem */
  --gap: var(--spacing-m); /* 2rem */

  /* ------Colors-------- */
  --primary-color: rgba(250, 250, 210, 0.689);
  --background-color: rgba(240, 128, 128, 0.6);
  --dark-text-color: #333333;
  --light-text-color: rgb(255, 255, 244);

  --accent-color-red: lightcoral;
  --accent-color-white: rgb(255, 255, 244);

  /* Design */
  --border-radius: 8px;
  --boxShadow: 0 4px 8px rgba(0, 0, 0, 0.2);

  /* ===================
   TYPOGRAPHY
   =================== */
  --font-size-base: 16px;
  --font-size-s: 14px;
  --font-size-m: 18px;
  --font-size-l: 24px;
  --font-size-xl: 32px;
  --font-size-xxl: 48px;
  --font-size-xxxl: 56px;

  /* Line heights */
  --line-height-l: 1.5;
  --line-height-xl: 2;

  /* Font weights */
  /* --font-weight-light: 300; */
  --font-weight-normal: 400;
  /* --font-weight-medium: 500; */
  --font-weight-semibold: 600;
  /* --font-weight-bold: 700; */
  /* --font-weight-extra-bold: 800; */

  /* Primary font */
  --primary-font: Georgia, Times, serif;

  /* Header font */
  --header-font: "Yuji Syuku", serif;

  /* Hero container */
  --heroHeaderFamily: "Yuji Syuku", serif;
  --heroSubHeaderFamily: "Long Cang", serif;
}