/* #BASE */
:root {
  --primary: #5e6c71;
  --primary-50: #fcfcfc;
  --primary-100: #f2f3f4;
  --primary-200: #dfe2e3;
  --primary-300: #bec4c6;
  --primary-400: #8e989c;
  --secondary: #ea2797;
  --tertiary: #776de6;
  --success: #37d67a;
  --warning: #ffc134;
  --warning-alt: #ff834d;
  --info: #0dd1e2;

  --header-height: 6rem;
}

html {
  scroll-behavior: smooth;
  user-select: none;
}

body {
  background: var(--white);
  color: var(--primary);
}
/* #BASE-END */

/* #COMPONENTS */
.divider-pill,
.title--bordered {
  --border-color: var(--warning);
}
.divider-pill,
.title--bordered::before {
  display: block;
  width: 1.25em;
  height: 0.25rem;
  margin-bottom: 0.375em;
  background: var(--border-color);
  border-radius: 0.2em;
}
.title--bordered::before {
  content: "";
}

.kv-button {
  padding: 0.5rem 1.5rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #fff;
  background: var(--warning-alt);
}
.kv-button--tertiary {
  background: var(--tertiary);
}
/* #COMPONENTS-END */

/* #LAYOUT */
.nav__link {
  color: var(--primary);
  font-weight: 500;
  font-size: 0.875rem;
  transition: color 0.2s ease-in-out;
}
/* #LAYOUT-END */

.animate-io {
  animation-play-state: paused;
  animation-fill-mode: forwards !important;
  animation-delay: 1ms;
  visibility: hidden;
}