:root {
  --h: 354;
  --clr_primary_dark: hsl(var(--h), 73%, 22%);
  --clr_primary: hsl(var(--h), 73%, 40%);
  --clr_primary_accent: hsl(var(--h), 93%, 57%);
  --clr_primary_light: hsl(var(--h), 48%, 88%);
  --clr_primary_pale: hsl(var(--h), 52%, 96%);

  /* actual primary colors are set in {location}.css file */

  --clr_gray: hsl(0, 2%, 35%);
  --clr_gray_dark: hsl(0, 2%, 17%);
  --clr_gray_light: hsl(0, 2%, 67%);
  --clr_gray_pale: hsl(0, 2%, 95%);

  --clr_black: #000;
  --clr_white: #fff;

  --letter_spacing: 0.04em;

  --max_width: 1600px;

  --fontweight-normal: 300;
  --fontweight-medium: 500;
  --fontweight-bold: 700;

  --fs-xs: clamp(0.74rem, -0.08vi + 0.76rem, 0.68rem);
  --fs-sm: clamp(0.83rem, 0.02vi + 0.83rem, 0.85rem);
  --fs-base: clamp(0.94rem, 0.17vi + 0.9rem, 1.06rem);
  --fs-md: clamp(1.05rem, 0.36vi + 0.96rem, 1.33rem);
  --fs-lg: clamp(1.19rem, 0.63vi + 1.03rem, 1.66rem);
  --fs-xl: clamp(1.33rem, 0.99vi + 1.09rem, 2.08rem);
  --fs-xxl: clamp(1.5rem, 1.46vi + 1.14rem, 2.59rem);
  --fs-xxxl: clamp(1.69rem, 2.07vi + 1.17rem, 3.5rem);
  --fs-xxxxl: clamp(1.9rem, 2.87vi + 1.18rem, 3.75rem);
}

/* theme colors */

:root.theme- {
  --h: 0;
}

:root.theme-africa {
  --h: 27;
}

:root.theme-americas {
  --h: 354;
}

:root.theme-asia {
  --h: 39;
}

:root.theme-europe {
  --h: 208;
}

:root.theme-oceania {
  --h: 170;
}