:root {
  /**
   * Gray scale colors.
   * Color number roughly corresponds to its luminosity.
   */
  --color--gray-hue: 201;
  --color--gray-saturation: 15%;
  --color--gray-5: hsl(var(--color--gray-hue), var(--color--gray-saturation), 5%);
  --color--gray-10: hsl(var(--color--gray-hue), var(--color--gray-saturation), 11%);
  --color--gray-20: hsl(var(--color--gray-hue), var(--color--gray-saturation), 20%);
  --color--gray-30: hsl(var(--color--gray-hue), var(--color--gray-saturation), 30%);
  --color--gray-45: hsl(var(--color--gray-hue), var(--color--gray-saturation), 44%);
  --color--gray-60: hsl(var(--color--gray-hue), var(--color--gray-saturation), 57%);
  --color--gray-65: hsl(var(--color--gray-hue), var(--color--gray-saturation), 63%);
  --color--gray-70: hsl(var(--color--gray-hue), var(--color--gray-saturation), 72%);
  --color--gray-90: hsl(var(--color--gray-hue), var(--color--gray-saturation), 88%);
  --color--gray-95: hsl(var(--color--gray-hue), var(--color--gray-saturation), 93%);
  --color--gray-100: hsl(var(--color--gray-hue), var(--color--gray-saturation), 97%);
  /**
    * Primary colors.
    * Color number roughly corresponds to its luminosity.
    */
  --color--primary-hue: 202;
  --color--primary-saturation: 79%;
  --color--primary-lightness: 50;
  --color--primary-30: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.36 * var(--color--primary-lightness)))));
  --color--primary-40: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.24 * var(--color--primary-lightness)))));
  --color--primary-50: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * var(--color--primary-lightness)));
  --color--primary-60: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.24 * (100 - var(--color--primary-lightness))))));
  --color--primary-80: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.85 * (100 - var(--color--primary-lightness))))));
  --color--black: #000;
  --color--white: #fff;
  --color--red: #e33f1e;
  --color--gold: #fdca40;
  --color--green: #3fa21c;
  --color-text-neutral-soft: var(--color--gray-45);
  --color-text-neutral-medium: var(--color--gray-20);
  --color-text-neutral-loud: var(--color--gray-5);
  --color-text-primary-medium: var(--color--primary-40);
  --color-text-primary-loud: var(--color--primary-30);
}

body {
  background: var(--color--gray-100) url("../../images/background.svg");
  background-position: block-start inline-start;
  color: var(--color--body, var(--color-text-neutral-medium));
}
body :where(h1, h2, h3, h4, h4, h5, h6) {
  color: var(--color--body--headings, var(--color-body));
}