/* ==========================================================================
   Credis - buttons and links
   Shared by the landing page and the investor teaser page.
   Requires tokens.css.
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding-inline: 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.button-sm {
  min-height: 2.5rem;
  padding-inline: 0.9375rem;
  font-size: 0.9375rem;
}

.button-primary {
  color: #fff;
  background: var(--teal-700);
  box-shadow: var(--shadow-sm);
}

.button-primary:hover {
  background: var(--teal-800);
}

.button-outline {
  color: var(--text-strong);
  border-color: rgb(6 29 58 / 0.22);
  background: var(--surface);
}

.button-outline:hover {
  border-color: rgb(6 29 58 / 0.4);
  background: var(--surface-sunken);
}

.button-inverse-outline {
  color: var(--text-inverse);
  border-color: rgb(255 255 255 / 0.5);
}

.button-inverse-outline:hover {
  border-color: #fff;
  background: rgb(255 255 255 / 0.1);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--teal-700);
  font-size: 1rem;
  font-weight: 600;
}

.link-arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}

.link-arrow:hover {
  color: var(--teal-800);
  text-decoration: underline;
  text-underline-offset: 3px;
}