:root {
  /* Button Colors */
  --btn-primary: var(--primary-bg);
  --btn-primary-bg: var(--primary-accent);

  --btn-secondary: var(--secondary-bg);
  --btn-secondary-bg: var(--secondary-accent);

  /* Button States */
  --btn-primary-hover-bg: var(--btn-secondary);
  --btn-secondary-hover-bg: var(--btn-primary);

  --btn-disabled-bg: var(--secondary-bg);
  --btn-disabled-text: var(--secondary-text);
}
button,
[role="button"] {
  background: var(--btn-primary-bg);
  color: var(--primary-text);

  cursor: pointer;
}
button:hover,
[role="button"]:hover {
  background: var(--btn-primary-hover-bg);
  color: var(--primary-text);
}

.secondary_btn {
  background: var(--primary-bg);
  color: var(--btn-secondary-text);
  border: 2px solid var(--btn-secondary-bg);
}
.password_btn {
  background: transparent !important;
  color: transparent !important;
}
.forgot_password_btn,
.resend_email_btn,
.login_btn {
  color: var(--primary-accent);
}
.resend_email_btn {
  background-color: transparent;
  cursor: pointer;
}

.active_tab {
  background: var(--btn-primary-bg);
  color: var(--primary-text);
}
.active_tab svg {
  fill: var(--btn-primary-bg);
  stroke: var(--primary-text);
}