/* Designed elements reused across multiple sections */
.primary-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  padding: 0.6rem 3rem;
  border-radius: 2rem;
  text-shadow: -1px -1px 0px var(--color-midtone), 1px 1px 0px var(--color-dark);
  background: linear-gradient(
    90deg,
    var(--color-midtone) 0%,
    var(--color-dark) 50%,
    var(--color-key) 100%
  );
  background-size: 200%;
  background-position: right;
  color: var(--color-light);
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.5px;
  cursor: pointer;
  height: 100%;
  max-height: 3rem;
  transition: all 0.3s ease-in-out;
}

.primary-cta:hover {
  background-position: left;
  filter: brightness(1.1) contrast(1.1);
}

.orange-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  padding: 0.6rem 3rem;
  border-radius: 2rem;
  text-shadow: -1px -1px 0px var(--color-primary),
    1px 1px 0px var(--color-secondary);
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-primary) 50%,
    var(--color-secondary) 100%
  );
  background-size: 200%;
  background-position: right;
  color: var(--color-light);
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.5px;
  cursor: pointer;
  height: 100%;
  max-height: 3rem;
  transition: all 0.3s ease-in-out;
}

.orange-cta:hover {
  background-position: left;
  filter: brightness(1.1) contrast(1.1);
}

.midtone-button {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  padding: 0.6rem 1rem;
  border-radius: 2rem;
  text-shadow: -1px -1px 0px var(--color-midtone), 1px 1px 0px var(--color-dark);
  background: linear-gradient(
    90deg,
    var(--color-midtone) 0%,
    var(--color-midtone) 50%,
    var(--color-dark) 100%
  );
  background-size: 200%;
  background-position: right;
  color: var(--color-light);
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.5px;
  cursor: pointer;
  height: 100%;
  transition: all 0.3s ease-in-out;
}

.midtone-button:hover {
  background-position: left;
  filter: brightness(1.1) contrast(1.1);
}

.theme-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  padding: 0.35rem;
  border-radius: 2rem;
  text-shadow: -1px -1px 0px var(--color-midtone), 1px 1px 0px var(--color-dark);
  background: linear-gradient(90deg, var(--color-midtone), var(--color-dark));
  color: var(--color-light);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  width: 2.3rem;
  border: none;
  transition: all 0.3s ease-in-out;
}

.theme-toggle:hover {
  filter: brightness(1.1) contrast(1.1);
}

[data-theme="dark"] .theme-icon {
  content: "☀️";
}