:root {
  --hna-color-orange: #f36315;
  --hna-color-light-orange: #f89265;
  --hna-color-blue: #0047ab;
  --hna-color-light-blue: #567ec5;
  --hna-color-turquoise: #00a99d;
  --hna-color-gray: #b7b7b7;
  --hna-color-bricks: #b7410e;

  --default-font-header: "VTCMartin", sans-serif;
  --default-font-body: "LacrimaMG-Serif", Courier, monospace;

  --font-size-small: 18px;
  --font-size-regular: 24px;
  --font-size-medium: 40px;
  --font-size-large: 72px;
  --font-size-x-large: 97px;

  --line-height-small: 1.2em;
  --line-height-regular: 1.2em;
  --line-height-medium: 1.2em;
  --line-height-large: 1em;
  --line-height-x-large: 1.2em;

  --letter-spacing-small: 0.02em;
  --letter-spacing-regular: 0.01em;
  --letter-spacing-medium: 0.02em;
  --letter-spacing-large: 0.02em;
  --letter-spacing-x-large: 0.02em;

  --spacing-vertical: 4px;
  --spacing-vertical-paragraph: 24px;
  --spacing-vertical-block: 48px;
  --spacing-vertical-block-double: calc(2 * var(--spacing-vertical-block));
  --spacing-horizontal: 24px;
  --grid-gap: var(--spacing-horizontal);

  --media-query-small: 480px;
  --media-query-medium: 768px;
  --media-query-large: 1024px;
  --media-query-x-large: 1440px;

  --z-index-top: 100;
  --z-index-middle: 50;
  --z-index-bottom: 1;
}

@media screen and (max-width: 480px) {
  :root {
    --font-size-regular: 16px;
    --font-size-medium: 24px;
    --font-size-large: 32px;
    --font-size-x-large: 48px;

    --spacing-vertical: 4px;
    --spacing-vertical-paragraph: 20px;
    --spacing-vertical-block: 28px;
    --spacing-horizontal: 16px;
  }
}

@media screen and (min-width: 481px) and (max-width: 1440px) {
  :root {
    --font-size-regular: 20px;
    --font-size-medium: 36px;
    --font-size-large: 64px;
    --font-size-x-large: 84px;

    --spacing-vertical: 4px;
    --spacing-vertical-paragraph: 20px;
    --spacing-vertical-block: 28px;
    --spacing-horizontal: 20px;
  }
}