@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;700&display=swap');

:root {
  --global-box-sizing: border-box;

  --color-swatch-text-dark: hsla(228, 33%, 15%, 1);
  --color-swatch-text-light: hsla(0, 0%, 100%, 1);

  --color-accent-background: hsla(81, 80%, 66%, 1);
  --color-accent-foreground: var(--color-swatch-text-dark);
  --color-accent-2-background: hsla(183, 31%, 34%, 1);
  --color-accent-2-foreground: var(--color-swatch-text-light);
  --color-accent-2-alt-background: hsla(118, 28%, 56%, 1);
  --color-accent-2-alt-foreground: var(--color-swatch-text-dark);
  --color-alert-background: hsla(18, 89%, 59%, 1);
  --color-alert-foreground: var(--color-swatch-text-dark);
  --color-alert-alt-background: hsla(18, 70%, 45%, 1);
  --color-alert-alt-foreground: var(--color-swatch-text-light);
  --color-brand-background: hsla(228, 33%, 15%, 1);
  --color-brand-foreground: var(--color-swatch-text-light);
  --color-container-background-background: hsla(18, 8%, 95%, 1);
  --color-container-background-foreground: var(--color-swatch-text-dark);
  --color-container-background-alt-background: hsla(18, 8%, 85%, 1);
  --color-container-background-alt-foreground: var(--color-swatch-text-dark);
  --color-container-standard-background: hsla(0, 0%, 100%, 1);
  --color-container-standard-foreground: var(--color-swatch-text-dark);
  --color-container-standard-old-background: hsla(215, 30%, 92%, 1);
  --color-container-standard-old-foreground: var(--color-swatch-text-dark);
  --color-dialog-backdrop: hsla(228, 33%, 15%, 0.72);
  --color-dialog-backdrop-alt: hsla(183, 31%, 34%, 0.72);
  --color-primary-cta-background: hsla(183, 31%, 34%, 1);
  --color-primary-cta-foreground: var(--color-swatch-text-light);

  --radius-small: 2px;
  --radius-medium: 4px;
  --radius-large: 8px;
  --radius-round: 100%;

  --spacer-xxs: 2px;
  --spacer-xs: 4px;
  --spacer-small: 8px;
  --spacer-medium: 16px;
  --spacer-large: 32px;
  --spacer-xl: 48px;
  --spacer-xxl: 64px;

  --icon-xs: 8px;
  --icon-small: 16px;
  --icon-medium: 24px;
  --icon-large: 32px;
  --icon-xl: 48px;
  --icon-xxl: 64px;
  
  --text-standard-font-family: 'Barlow', sans-serif;

  /* Based on type-scale.com: Open Sans, 1.125 Major Second Scale */
  --text-heading-1-size: 28.83px;
  --text-heading-1-line-height: 28.83px;

  --text-heading-2-size: 25.63px;
  --text-heading-2-line-height: 25.63px;

  --text-heading-3-size: 22.78px;
  --text-heading-3-line-height: 22.78px;

  --text-heading-4-size: 20.25px;
  --text-heading-4-line-height: 20.25px;

  --text-heading-5-size: 18.00px;
  --text-heading-5-line-height: 18.00px;

  --text-standard-size: 16px;
  --text-standard-line-height: 16px;

  --text-small-size: 14.22px;
  --text-small-line-height: 14.22px;

  --text-xs-size: 12.64px;
  --text-xs-line-height: 12.64px;

  --text-xxs-size: 11.24px;
  --text-xxs-line-height: 11.24px;

  --text-bold-font-weight: 700;
  --text-standard-font-weight: 400;
  --text-primary-cta-text-transform: uppercase;

  --transition-hover-in-easing: cubic-bezier(0.075, 0.82, 0.165, 1);
  --transition-hover-out-easing: cubic-bezier(0.075, 0.82, 0.165, 1);
  --transition-hover-in-time: 233ms;
  --transition-hover-out-time: 433ms;
}

* {
  box-sizing: var(--global-box-sizing);
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-container-background-background);
  box-sizing: var(--global-box-sizing);
  color: var(--color-container-background-foreground);
  font-display: swap;
  font-family: var(--text-standard-font-family);
  font-size: var(--text-standard-size);
  font-weight: var(--text-standard-font-weight);
  line-height: initial;
}

a:link,
a:visited {
  text-decoration: none;
}

dl, ol, ul {
	margin-top: 0;    /* Override Bootstrap when needed. */
	margin-bottom: 0; /* Override Bootstrap when needed. */
}

li {
  list-style: none;
}

:is(h1, h2, h3, h4, h5, h6, strong) {
  font-weight: var(--text-bold-font-weight);
  margin: 0; /* Override Bootstrap when needed. */
}

h1 {
  font-size: var(--text-heading-1-size);
  line-height: var(--text-heading-1-line-height);
}

h2 {
  font-size: var(--text-heading-2-size);
  line-height: var(--text-heading-2-line-height);
}

h3 {
  font-size: var(--text-heading-3-size);
  line-height: var(--text-heading-3-line-height);
}

h4 {
  font-size: var(--text-heading-4-size);
  line-height: var(--text-heading-4-line-height);
}

h5,
h6 {
  font-size: var(--text-heading-5-size);
  line-height: var(--text-heading-5-line-height);
}

small {
  font-size: var(--text-xxs-size);
  line-height: var(--text-xxs-line-height);
}

p {
  line-height: 1.6em;
  margin-bottom: var(--spacer-medium);
}
p:last-child {
  margin-bottom: 0;
}

input {
	font-family: var(--text-standard-font-family); /* Override Bootstrap when needed. */
}

svg {
	vertical-align: initial; /* Override Bootstrap when needed. */
}