/* buttons.css placeholder */
.button {
	display: inline-block;
	padding: 0.5rem 1rem;
	background: var(--color-primary);
	color: #fff;
}

.btn {
	a {
		display: inline-block;
		padding: 1.125rem 1.5rem;
		border-radius: 12px;
		font-weight: 700;
		text-decoration: none;
		font-size: 1.125rem;
		transition: background-color 150ms ease, transform 120ms ease,
			box-shadow 150ms ease, border 200ms;
		cursor: pointer;
		/* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); */
		-webkit-font-smoothing: antialiased;
	}
}

.btn-primary {
	a {
		background: var(--color-primary);
		color: var(--color-white);
		border: 4px solid var(--color-primary);
	}
}

.btn-secondary {
	a {
		background: var(--color-accent-2);
		color: var(--color-primary);
		border: 4px solid var(--color-accent-2);
	}
}

.btn-brand-1 {
	a {
		background-color: var(--color-brand-1);
		color: var(--color-primary);
		border: 4px solid var(--color-brand-1);
	}
}

.btn:hover {
	a {
		border: 4px solid #461312;
	}
}

/* Text links */

/* Base link */
.link {
  color: var(--color-accent-green);
  font-size: var(--link-font-size);
  font-weight: var(--link-font-weight);
  line-height: var(--link-line-height);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  transition: var(--link-transition);
  cursor: pointer;
}

/* Hover */
.link:hover {
  color: var(--color-accent-green-hover);
  text-decoration-color: currentColor;
}

/* Keyboard focus */
.link:focus-visible {
  outline: 2px solid var(--color-accent-green);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Active */
.link:active {
  color: var(--color-accent-green);
}

.link {

}