:root {
  --ars-border-radius: 0.375rem;

  /* Primary color */
  --ars-color-primary-1: #5c1a00;
  --ars-color-primary-2: #7e2705;
  --ars-color-primary-3: #9f360d;
  --ars-color-primary-4: #c14717;
  --ars-color-primary-5: #e45c25;
  --ars-color-primary: #e45c25;
  --ars-color-primary-6: #ea784b;
  --ars-color-primary-7: #f19774;
  --ars-color-primary-8: #f8b89f;
  --ars-color-primary-9: #ffdacc;

  /* Secondary color */
  --ars-color-secondary-0: #000000;
  --ars-color-secondary-1: #2c2e30;
  --ars-color-secondary-2: #595c60;
  --ars-color-secondary-3: #878c90;
  --ars-color-secondary-4: #b7bcc0;
  --ars-color-secondary-5: #e9ecef;
  --ars-color-secondary: #e9ecef;
  --ars-color-secondary-6: #edf0f3;
  --ars-color-secondary-7: #f1f4f6;
  --ars-color-secondary-8: #f6f7f9;
  --ars-color-secondary-9: #fafbfc;
  --ars-color-secondary-10: #ffffff;

  /* Content typography */
  --ars-type-content-10: 400 1.813em/2.175em 'Source Sans 3';
  --ars-type-content-9: 400 1.5em/1.8em 'Source Sans 3';
  --ars-type-content-8: 400 1.313em/1.575em 'Source Sans 3';
  --ars-type-content-7: 400 1.188em/1.425em 'Source Sans 3';
  --ars-type-content-6: 400 1.063em/1.275em 'Source Sans 3';
  --ars-type-content-5: 400 1em/1.2em 'Source Sans 3';
  --ars-type-content: 400 1em/1.2em 'Source Sans 3';
  --ars-type-content-4: 400 0.938em/1.125em 'Source Sans 3';
  --ars-type-content-3: 400 0.875em/1.05em 'Source Sans 3';
  --ars-type-content-2: 400 0.75em/0.9em 'Source Sans 3';
  --ars-type-content-1: 400 0.688em/0.825em 'Source Sans 3';

  /* title typography */
  --ars-type-page-titles-10: 300 4rem 'Source Serif 4';
  --ars-type-page-titles-9: 300 3.688rem 'Source Serif 4';
  --ars-type-page-titles-8: 300 3.5rem 'Source Serif 4';
  --ars-type-page-titles-7: 300 3.375rem 'Source Serif 4';
  --ars-type-page-titles-6: 300 3.25rem 'Source Serif 4';
  --ars-type-page-titles-5: 300 3.188rem 'Source Serif 4';
  --ars-type-page-titles: 300 3.188rem 'Source Serif 4';
  --ars-type-page-titles-4: 300 3.125rem 'Source Serif 4';
  --ars-type-page-titles-2: 300 3.063rem 'Source Serif 4';
  --ars-type-page-titles-2: 300 2.938rem 'Source Serif 4';
  --ars-type-page-titles-1: 400 2rem 'Source Serif 4';
}

/* Typography */

/* TODO: remove me if safe */
/* p {
  font: var(--ars-type-content);
  color: var(--ars-color-secondary-1);
} */

.text-color {
  color: var(--ars-color-secondary-1);
}

/* Page titles */
.text-title-1 {
  font: var(--ars-type-page-titles-1);
}

.text-title-2 {
  font: var(--ars-type-page-titles-2);
}

.text-title-3 {
  font: var(--ars-type-page-titles-3);
}

.text-title-4 {
  font: var(--ars-type-page-titles-4);
}

.text-title-5 {
  font: var(--ars-type-page-titles-5);

}

.text-title-6 {
  font: var(--ars-type-page-titles-6);

}

.text-title-7 {
  font: var(--ars-type-page-titles-7);

}

.text-title-8 {
  font: var(--ars-type-page-titles-8);

}

.text-title-9 {
  font: var(--ars-type-page-titles-9);

}

.text-title-10 {
  font: var(--ars-type-page-titles-10);

}

/* Page text content */

.text-content-1 {
  font: var(--ars-type-content-1);
}

.text-content-2 {
  font: var(--ars-type-content-2);

}

.text-content-3 {
  font: var(--ars-type-content-3);

}

.text-content-4 {
  font: var(--ars-type-content-4);

}

.text-content-5 {
  font: var(--ars-type-content-5);

}

.text-content-6 {
  font: var(--ars-type-content-6);

}

.text-content-7 {
  font: var(--ars-type-content-7);

}

.text-content-8 {
  font: var(--ars-type-content-8);

}

.text-content-9 {
  font: var(--ars-type-content-9);

}

.text-content-10 {
  font: var(--ars-type-content-10);

}

/* Buttons */

.btn-s, .btn-m, .btn-l {
  cursor: pointer;
  text-decoration: none;
  display: inline-grid;
  place-items: center;
}

.btn-m {
  padding: 0px 24px;
  height: 40px;
  border: none;
  font: var(--ars-type-content);
}

.btn-l {
  padding: 0px 39px;
  height: 65px;
  border: none;
  font: var(--ars-type-content-10);
}

.btn-s {
  padding: 0px 30px;
  height: 31px;
  border: none;
  font: var(--ars-type-content-xs);
}

.btn-primary {
  background: var(--ars-color-primary-5);
  border-radius: var(--ars-border-radius);
  color: var(--ars-color-secondary-9);
  transition: background 150ms ease-in-out;
}

.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--ars-color-primary-4);
  color: #fff;
  border: none;
}

.btn-primary:active {
  background: var(--ars-color-primary-6);
}

.btn-secondary {
  background: var(--ars-color-secondary-5);
  border-radius: var(--ars-border-radius);
  color: var(--ars-color-secondary-2);
  transition: background 150ms ease-in-out;
}

.btn-secondary:hover, .btn-secondary:focus-visible {
  color: var(--ars-color-secondary-2);
  background: var(--ars-color-secondary-4);
  border: none;
}

.btn-secondary:active {
  background: var(--ars-color-secondary-6);
}

.btn-round {
  color: var(--ars-color-secondary-1) !important;
  font: var(--ars-type-content-subtext);
  text-decoration: none;
}

.btn-round i {
  color: var(--ars-color-secondary-1) !important;
  background-color: var(--ars-color-secondary-5);
  border-radius: 100%;
  margin: auto;
  display: grid !important;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  transition: all 180ms ease;
}

.btn-round:hover i {
  background-color: var(--ars-color-secondary-4);
  color: var(--ars-color-secondary-1) !important;
  cursor: pointer;
}

.btn-round:active i {
  background-color: var(--ars-color-secondary-6);
}

/* Link */

.link {
  color: var(--ars-color-primary-5) !important;
  transition: color 150ms ease-in-out;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
}

.link:hover {
  color: var(--ars-color-primary-3) !important;
  cursor: pointer;
}

/* Horizontal line separator with text */
.separator {
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #ccc;
  line-height: 0.1em;
  margin: 1.5rem 0;
  position: relative;
}

.separator span {
  position: absolute;
  transform: translate(-50%, 0);
  display: inline-block;
  background: #fff;
  width: 2rem;
  height: 1rem  ;
  color: var(--ars-color-secondary-3);
  font: var(--ars-type-content);
  line-height: 0;
}