/* Button styling */
.button {
  padding: 6px; /* Comfortable padding, slightly wider for prominence */
  border: 1px solid #e2e8f0; /* Light gray border, matching inputs */
  border-radius: 6px; /* Rounded corners for softness */
  background-color: #fafafa; /* Soft default background */
  font-family: inherit; /* Matches body font */
  font-size: 1em; /* Readable size */
  font-weight: 500; /* Medium weight for a solid feel */
  cursor: pointer; /* Hand cursor on hover */
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease; /* Smooth transitions */
}

.button:hover {
  background-color: #ffffff;
}

.button:focus {
  outline: none; /* Removes default outline */
  border-color: #1a3c34; /* Deep teal on focus, consistent across variants */
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3); /* Placeholder for color-specific shadow */
}

.button:active {
  background-color: #ffffff;
}

.bluebutton {
  color: #2b6cb0; /* Blue text */
}

.bluebutton:hover,
.bluebutton:active {
  border-color: #2b6cb0; /* Blue border on hover/active */
}

.bluebutton:focus {
  box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.3); /* Blue focus ring */
}

.graybutton {
  color: #4a5568; /* Gray text */
}

.graybutton:hover,
.graybutton:active {
  border-color: #4a5568; /* Gray border on hover/active */
}

.graybutton:focus {
  box-shadow: 0 0 0 3px rgba(74, 85, 104, 0.3); /* Gray focus ring */
}

.redbutton {
  color: #c53030; /* Red text */
}

.redbutton:hover,
.redbutton:active {
  border-color: #c53030; /* Red border on hover/active */
}

.redbutton:focus {
  border-color: #9b2c2c; /* Darker red on focus */
  box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.3); /* Red focus ring */
}

/* Signup Button */
.signup-btn {
  width: 100%; /* Full width */
  padding: 8px; /* Slightly larger than global 6px */
  font-size: 1em; /* Matches global button */
  font-weight: 500; /* Matches global button */
  background-color: #2b6cb0; /* Matches right container */
  color: #ffffff; /* White font */
  border: none; /* Overrides .button’s border */
  border-radius: 6px; /* Matches global button */
  transition: background-color 0.2s ease; /* Matches global button */
}

.signup-btn:hover {
  background-color: #1e4e8c; /* Darker shade for hover */
}

.signup-btn:focus {
  outline: none; /* Matches global button */
  border-color: #1e4e8c; /* Darker shade for focus */
  box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.3); /* Matches .bluebutton focus */
}