/* atkinson-hyperlegible-regular - latin */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('/assets/fonts/atkinson-hyperlegible/atkinson-hyperlegible-v7-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/assets/fonts/atkinson-hyperlegible/atkinson-hyperlegible-v7-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* atkinson-hyperlegible-700 - latin */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('/assets/fonts/atkinson-hyperlegible/atkinson-hyperlegible-v7-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/assets/fonts/atkinson-hyperlegible/atkinson-hyperlegible-v7-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

:root {
  --ratio: 1.5;
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));

  --container-width: 1160px;

  --outline-size: 1px;
  --outline-style: solid;
  --outline-offset: 3px;

  --transition-time: 150ms;
  --transition-easing: ease;

  --border-radius: var(--s-3);
  
  --pagination-bullet-size: 1.2rem;

  --text-color: #222;
  --color-secondary-dark: #5A6C60;
  --color-secondary-light: #94A19A;
  --color-body-bg: #fff;
  --color-header-bg: #f1f2f2;
  --color-highlight: #e0b33f;
  --color-rust: #b65534;

  --font-primary: 'Atkinson Hyperlegible';
}
html {
  font-size: 62.5%;
}
body {
  font-family: var(--font-primary);
  font-size: clamp(1.4rem, 0.5rem + 2vw, 1.6rem); /* https://ntgard.medium.com/accessible-fluid-typography-875c4aac8056 */
  color: var(--color-secondary-dark);
  background-color: var(--color-body-bg);
}
a, button, input[type="submit"] {
	transition: border-color var(--transition-time) var(--transition-easing), 
              background-color var(--transition-time) var(--transition-easing), 
              color var(--transition-time) var(--transition-easing), 
              opacity var(--transition-time) var(--transition-easing);
	color: inherit;
}
a[href], button, input[type="button"], input[type="submit"] {
	cursor: pointer;
}
a {
	color: inherit;
  text-underline-offset: var(--s-5);
  text-decoration: none;
}
a[href^="tel"] {
	white-space: nowrap;
}
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: var(--outline-size) var(--outline-style);
  outline-offset: var(--outline-offset);
}
h1, h2, h3, h4, h5, h6 {
  line-height: calc(1em + 0.5rem);
}

/* sm */
@media (min-width: 576px) {
  :root {
    --s0: 1.2rem;
  }
}

/* md */
@media (min-width: 768px) {
  :root {
    --s0: 1.4rem;
  }
}

/* lg */
@media (min-width: 992px) {
  :root {
    --s0: 1.6rem;
  }
}

/* xl */
@media (min-width: 1200px) {
}

/* xxl */
@media (min-width: 1400px) {
}